如何通过表单提交传递下拉值？

Question

我有这两个下降：

我必须根据在“选择类别”下拉列表中选择的值提供“选择项目”下拉列表的值。

这是我选择类别下拉列表的PHP：

<form>
...
    <select name="category" id="category" value="category" class="form-control ddplaceholder" style="width:220px;font-size:18px;font-family:Roboto;" onclick="document.form.submit();">
                 <option value="" disabled selected>Select Category</option>
...
<input type="submit" name="submit" style="width:20%;padding:15px;" value="Update"</input>
...</form>

但没有任何事情发生。我该怎么做？

Answer 1

尝试使用onchange代替onclick

<form>
...
    <select name="category" id="category" value="category" class="form-control ddplaceholder" style="width:220px;font-size:18px;font-family:Roboto;" onchange="document.forms[0].submit();">
                 <option value="" disabled selected>Select Category</option>
...
<input type="submit" name="submit" style="width:20%;padding:15px;" value="Update"</input>
...</form>

你应该注意的另外两件事

1.   

   onchange="document.form.submit();"这不起作用，因为   document没有属性form它是forms所以你应该这样做   使用onchange="document.forms[0].submit();"

2.   

   您已将submit button命名为submit，这将阻止您   来自form的{​​{1}}因为submitting是submit所以   将您的提交按钮重命名为其他内容。

Answer 2

如果您的下拉列表没有很多可能的值，则可以使用普通的旧JavaScript来实现此目的。请参阅此http://jsfiddle.net/mplungjan/65Q9L/，但它需要在页面加载时立即加载所有值，如下所示：

var stateObject = {
    "California": {
        "Monterey": ["Salinas", "Gonzales"],
        "Alameda": ["Oakland", "Berkeley"]
    },
    "Oregon": {
        "Douglas": ["Roseburg", "Winston"],
        "Jackson": ["Medford", "Jacksonville"]
    }
}

Answer 3

document.form.submit();将提交非要求的表格。

相反，您需要使用第一个下拉列表中的所选值进行ajax调用，并且响应将用于构建第二个下拉列表的选项。

使用change，这将在更改选项

时触发

$('category').on('change', function (e) {
    var optionSelected = $("option:selected", this);
    var valueSelected = this.value; // will give value of selected option

   $.ajax({
     url:"someUrl", // this url will return response from backend
     // other methods
     success:function(response){
        //use this response to build the second dropdown
      }
    })



});