使用上一个下拉菜单中的选项动态填充下拉菜单

Question

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

完成这项工作的总体思路是什么？ 我已经实现了一些代码。 它在是否提供输入的条件下使用if / else语句。 因此，在选择了第一个下拉菜单之后，页面将提交，并且if / else语句将代码定向到显示相同形式但下拉菜单中保持选择的代码。 我使用onchange ='this.form.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

Answer 1

这是一个提示：您可以使用对服务器端页面的ajax调用来填充下一个菜单（这将使您返回数据）：这将使您：
-避免发送表单和通过页面传递值（您只能在最后发送表单）
-让用户更改自己的选择（如果需要），而无需浏览历史记录

我认为将ajax与jquery一起使用将非常简单，即使您不知道也是如此。

请检查简短的ajax jquery小提琴示例，看看使用jquery有多容易（在这里，对于跨域请求，那不是您的情况，您必须禁用浏览器的网络安全，例如，对于google chorme set google chrome to使用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>

使用上一个下拉菜单中的选项动态填充下拉菜单

问题描述

1 个解决方案

解决方案1
0 2013-05-30 22:16:47

使用上一个下拉菜单中的选项动态填充下拉菜单

问题描述

1 个解决方案

解决方案1 0 2013-05-30 22:16:47

解决方案1
0 2013-05-30 22:16:47