[英]need jquery to change the default option of 2nd dropdown to “select” whenever i change options in 1st dropdown
This is the the jquery i am using. 这是我正在使用的jQuery。 I am able to get "select" in district when i choose state but when i keep selecting different state again and again without touching district the values in district changes to the last option of each district.
当我选择状态时,我可以在区域中获得“选择”,但是当我一次又一次地选择不同的状态而又不触及区域时,区域中的值将更改为每个区域的最后一个选项。 I want default to be "select"(disabled) each time i change state.
我希望每次更改状态时默认为“选择”(禁用)。
<script>
$(document).ready(function() {
$('#select3').selectmenu('disable');
$("#select2").change(function() {
if ($(this).data('options') === undefined) {
$(this).data('options', $('#select3 option').clone());
}
var id = $(this).val();
var option = $(this).data('options').filter('[value=' + id + ']');
$('#select3').html(option);
$('#select3').selectmenu('refresh');
$('#select3').selectmenu('enable');
});
});
<body>
<label for="select2">State:</label>
<select name="select2" id="select2">
<option value = "0">Select</option>
<option value = "1">Maharashtra</option>
<option value = "2">Gujarat</option>
<option value = "3">Rajasthan</option>
</select>
<label for="select3">District:</label>
<select name="select3" id="select3">
<option value = "0">Select State</option>
<option value = "1">Select</option>
<option value = "1">Pune</option>
<option value = "1">Vidarbha</option>
<option value = "1">Thane</option>
<option value = "2">Select</option>
<option value = "2">Bharuch</option>
<option value = "2">Ahmedabad</option>
<option value = "2">Jamnagar</option>
<option value = "3">Select</option>
<option value = "3">Jaipur</option>
<option value = "3">Jodhpur</option>
<option value = "3">Bikaner</option>
</select>
</body>
You can use CSS alone to hide the other values on page load, and then filter through the select3 options. 您可以单独使用CSS来隐藏页面加载时的其他值,然后通过select3选项进行过滤。 (You can't use your
$(this).data('options').filter
because this
refers to #select2, not #select3, so the states options remain unchanged) (您不能使用
$(this).data('options').filter
因为this
引用的是#select2,而不是#select3,因此状态选项保持不变)
const select2 = $("#select2"); select2.change(() => { const stateVal = select2.val(); const select3Options = $('#select3').children(); select3Options.show(); select3Options.filter((_, elm) => elm.value && elm.value !== stateVal).hide(); select3Options[0].selected = 'selected'; });
#select3 > option:not([value="0"]) { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <label for="select2">State:</label> <select name="select2" id="select2"> <option value = "0">Select</option> <option value = "1">Maharashtra</option> <option value = "2">Gujarat</option> <option value = "3">Rajasthan</option> </select> <label for="select3">District:</label> <select name="select3" id="select3"> <option value = "0">Select State</option> <option value = "1">Pune</option> <option value = "1">Vidarbha</option> <option value = "1">Thane</option> <option value = "2">Bharuch</option> <option value = "2">Ahmedabad</option> <option value = "2">Jamnagar</option> <option value = "3">Jaipur</option> <option value = "3">Jodhpur</option> <option value = "3">Bikaner</option> </select> </body>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.