使用上一个下拉菜单中的选项动态填充下拉菜单 [英] Dynamically populate drop down menu with selection from previous drop down menu

问题描述

我有一个用Python编写的cgi脚本。有两个下拉菜单，然后是一个提交按钮。我希望能够从第一个菜单中进行选择，然后基于该选择，让第二个下拉菜单动态填充新选择。无需单击任何按钮即可填充第二个菜单，而只需从第一个菜单中进行选择即可。 每次我在第一个菜单上选择一个新项目时，第二个菜单也应连续重新填充-再次单击而不单击提交。

I have a cgi script written in Python. There are two drop down menus and then a submit button. I'd like to be able to make a selection from the first menu, and based off that choice, have the second drop down menu dynamically populate new choices. The second menu should populate without having to click any button, but simply from making a selection from the first menu. The second menu should also repopulate continually every time I select a new item on the first menu - again, without clicking submit.

一般情况是什么完成这个主意？我已经实现了一些代码。它在是否提供输入的条件下使用if / else语句。因此，在选择了第一个下拉菜单之后，页面将提交，并且if / else语句将代码定向到显示相同形式但下拉菜单中保持选择的代码。我使用onchange =’this.form.submit（）提交表单，而不必使用提交按钮。 当前的问题是，在进行选择时，第一次会自动提交表单，但在此表单上重新选择似乎不起作用。因此，我不确定onchange =’this.form.submit（）是否在第一次之后提交表单。

What's the general idea to getting this done? I already have implemented some of the code. It uses if/else statements on conditions of whether the inputs have been provided. So after the first drop down menu selection is made, the page submits, and an if/else statement directs to code that displays the same form but with the selection maintained in the drop down menu. I'm using onchange='this.form.submit() to submit the form without having to use the submit button. The current problem is that while making a selection submits the form automatically the first time, reselecting on this form does not seem to work. So, I'm not sure if onchange='this.form.submit() submits the form after the first time.

这里是原型。我朝着正确的方向前进吗？还是我应该使用Ajax？ （一点都不熟悉）：

Here is a prototype. Am I going in the right direction? Or should I be using Ajax? (not familiar with this at all yet):

firstChoicesList = firstChoices()
print(""" <form method="post" action="/cgi-bin/thisScript.py">""")

# if both choices are not selected yet
if "firstChoice" not in form and "secondChoice" not in form:
    # first choice drop down menu
    print("""<p>first choice <select name="firstChoice">""")
    for f in fristChoicesList:
        print("""<option value='""" + f + """'>""" + f + """</option>""")

    # second choice drop down menu
    print("""</select></p>""")
    print("""<p>second choice <select name="secondChoice">""")
    for f in secondChoicesList: # currently contains 1 empty string 
        print("""<option value='""" + f + """'>""" + f + """</option>""")
    print("""</select></p>""")
    print("""
                        <p><input type="submit" />
                </form>
    """)
    print("Please fill in the forms.")
    sys.exit(1) # don't proceed with rest of code below these if/else statements

# if first choice has been selected but not the second
elif "firstChoice" in form and "secondChoice" not in form: 
    # <code for first drop down menu again with choice selected>
    # this function takes the first choice as an argument and returns selections for the second menu
    secondChoicesList = secondChoices(form["firstChoice"].value) 
    # <code for second drop down menu with choices populated from secondChoicesList>
    print("""
                        <p><input type="submit" />
                </form>
    """)
    print("Please fill in the forms.")
    sys.exit(1)

# if both are selected 
else:
    # <same code as above except have both drop down menus save previous selections>
    # proceed to run rest of cgi script 

推荐答案

这是一个提示：您可以填充带有ajax调用的服务器端页面的下一个菜单（它将向您返回数据）：这将使您：

-避免发送表单并通过页面传递值（您将仅发送表单最后））

-让用户更改自己的选择（如果需要），而无需浏览历史记录

This is an hint: you can populate the next menu with an ajax call to a server side page (that will give you back the data): this will let you:
- Avoid to send forms and pass values through pages (you will send the form only at the end)
- Let user changes his choise (if he need it), without surfing the history

我认为将ajax与jquery结合使用

I think that using ajax with jquery will be really simple to use, also if you don't know it.

请检查简短的ajax jquery小提琴示例，以了解使用jquery有多容易（这里，对于跨域请求，情况并非如此，您必须禁用浏览器的网络安全性，例如适用于Google chorme 设置google chrome以进行跨域请求ajax ）

Please, check short ajax jquery fiddle example to see how easy is to use jquery (here, for cross domain request, that shouln't be your case, you have to disable web security of your browser, e.g. for google chorme set google chrome to make cross domain request with ajax )

小提琴的代码：

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<body>
<select name="a" id="a" onchange="func(this.value)">
<option value="">choose</option>
<option value="https://www.google.it/search?q=ajax+and+juery&oq=ajax+and+juery&aqs=chrome.0.57j0l3.7474j0&sourceid=chrome&ie=UTF-8#sclient=psy-ab&q=ajax+jquery&oq=ajax+jquery&gs_l=serp.3..0l10.2179.3578.2.3820.7.3.1.3.3.1.206.516.0j2j1.3.0...0.0.0..1c.1.15.serp.9gdUZUmAxcI&psj=1&bav=on.2,or.r_qf.&bvm=bv.47244034,d.ZGU&fp=41333c9f97f3f20a&biw=800&bih=505">google</option>
<option value="http://it.bing.com/search?q=ajax+jquery&go=&qs=n&form=QBLH&filt=all&pq=ajax+jquery&sc=0-0&sp=-1&sk=">bing</option>
</select>
</body>
<script>
function func(ak){
$.ajax({
    url : ak,
    success : function (data,state) {
        $("body").html(data);
        alert(state);
    },
    error : function (request,state,error) {
        alert("Error. stato della chiamata: "+request+'  '+error+'   '+state);
    console.log("Error. stato della chiamata: "+request+'  '+error+'   '+state);
    }
});
}
</script>

这篇关于使用上一个下拉菜单中的选项动态填充下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！