从上一个下拉菜单中选择动态填充下拉菜单

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

完成此任务的一般想法是什么？我已经实现了一些代码。它在输入是否被提供的条件下使用if/else语句。因此，在第一个下拉菜单选择完成后，页面提交，并且一个if/else语句指向显示相同表单的代码，但选择保留在下拉菜单中。我使用onchange ='this.form.submit（）来提交表单而不必使用submit按钮。 目前的问题是，当选择自动提交表单时，第一次重新选择此表单似乎不起作用。所以，我不确定onchange ='this.form.submit（）在第一次之后提交表单。

这是一个原型。我正朝着正确的方向走吗？或者我应该使用Ajax？（不熟悉，在所有尚未）：

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

来源

2013-05-30 imagineerThat

这是一个暗示：你可以填充下一菜单用Ajax调用服务器端页面（这会给你回数据）：这会让你：
- 避免通过网页发送的形式，并通过值（你只会在最后发送的形式）
- 让用户改变他的choise（如果他需要的话），而无需浏览历史

我想与jQuery使用ajax将非常简单易用，如果你不知道它。

请检查short ajax jquery fiddle example看到的是多么容易使用的jQuery（这里，跨域请求，即shouln't被你的情况，你必须禁用您的浏览器，如为谷歌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>

来源

2013-05-30 22:16:47

@imagineerThis答案更新 –

从上一个下拉菜单中选择动态填充下拉菜单

回答

相关问题