提交表單后，我只能獲取分配給該值的數字。我想提交選項之間的任何文本select。例如，當我選擇Bird并且Dove我想要接收Bird而Dove不是3并且3$("#select1").change(function() { if ($(this).data('options') === undefined) { /*Taking an array of all options-2 and kind of embedding it on the select1*/ $(this).data('options', $('#select2 option').clone()); } var id = $(this).val(); var options = $(this).data('options').filter('[value=' + id + ']'); $('#select2').html(options);});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script><form method="POST" action="process.php"> <select name="select1" id="select1"> <option value="0">-Select-</option> <option value="1">Cars</option> <option value="2">Phones</option> <option value="3">Birds</option> </select> <select name="select2" id="select2"> <option value="0">-Select-</option> <option value="1">BMW</option> <option value="1">Benz</option> <option value="1">Toyota</option> <option value="2">iPhone</option> <option value="2">Samsung</option> <option value="2">Motorola</option> <option value="3">Eagle</option> <option value="3">Hawk</option> <option value="3">Dove<option> </select><br> <label>Postal code</label> <input type="number" name="zipcode" placeholder="postal code"> <button>Search</button></form>
2 回答
紅顏莎娜
TA貢獻1842條經驗 獲得超13個贊
提交表單后，value將發送所選選項。問題是因為您使用此值來將子option元素與父元素匹配。
要解決此問題，您需要value按預期使用，即。保存提交表單時要發送到服務器的值，并使用不同的方法option對 之間的元素進行分組select。我建議使用一個data屬性來代替，如下所示：
$("#select1").change(function() {
if (!$(this).data('options')) {
$(this).data('options', $('#select2 option').clone());
}
var category = $(this).find('option:selected').data('category');
var options = $(this).data('options').filter(function() {
return $(this).data('category') == category;
});
$('#select2').html(options);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" action="process.php">
<select name="select1" id="select1">
<option data-category="0" value="">-Select-</option>
<option data-category="1" value="Cars">Cars</option>
<option data-category="2" value="Phones">Phones</option>
<option data-category="3" value="Birds">Birds</option>
</select>
<select name="select2" id="select2">
<option data-category="0" value="Cars">-Select-</option>
<option data-category="1" value="BMW">BMW</option>
<option data-category="1" value="Benz">Benz</option>
<option data-category="1" value="Toyota">Toyota</option>
<option data-category="2" value="iPhone">iPhone</option>
<option data-category="2" value="Samsung">Samsung</option>
<option data-category="2" value="Motorola">Motorola</option>
<option data-category="3" value="Eagle">Eagle</option>
<option data-category="3" value="Hawk">Hawk</option>
<option data-category="3" value="Dove">Dove</option> <!-- note I fixed your typo here, missing / -->
</select><br>
</form>
縹緲止盈
TA貢獻2041條經驗 獲得超4個贊
只需將值從number更改為text即可。
例子
<option value="Hawk">Hawk</option> <option value="Dove">Dove<option>
- 2 回答
- 0 關注
- 134 瀏覽
添加回答
舉報
0/150
提交
取消