如何通過表單提交傳遞下拉菜單的值？

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 submitting因為submit是一個javascript function因此將您的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調用，並且響應將用於構建第二個下拉列表的選項。

使用更改將在選項更改時觸發

$('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
      }
    })



});