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调用服务器端页面填充下一个菜单（这将为您提供数据）：这将让您：
- 避免发送表格并通过页面传递值（您将仅在结尾处发送表格）
- 让用户改变他的选择（如果他需要），而无需浏览历史记录

我认为使用带有jquery的ajax会非常简单，如果你不知道的话。

请检查short ajax jquery fiddle example，了解使用jquery是多么容易（在这里，对于跨域请求，这不是您的情况，您必须禁用浏览器的网络安全性，例如google chorme { {3}}）

小提琴的代码：

<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 个答案: