每当我更改第一个下拉列表中的选项时，需要 jquery 将第二个下拉列表的默认选项更改为“选择”
Posted
技术标签:
【中文标题】每当我更改第一个下拉列表中的选项时，需要 jquery 将第二个下拉列表的默认选项更改为“选择”【英文标题】：need jquery to change the default option of 2nd dropdown to "select" whenever i change options in 1st dropdown 【发布时间】：2018-09-03 03:34:39 【问题描述】：这是我正在使用的 jquery。当我选择州时，我可以在区中获得“选择”，但是当我一次又一次地选择不同的州而不触及区时，区中的值会变为每个区的最后一个选项。我希望每次更改状态时都默认为“选择”（禁用）。
<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>
【问题讨论】：
【参考方案1】：您可以单独使用 CSS 来隐藏页面加载时的其他值，然后通过 select3 选项进行过滤。 （您不能使用$(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>【讨论】：
您的代码在 sn-p 中工作，但不能以我使用 jquery mobile 制作的形式工作。当我更改 select2 时，select3 保持不变。 当我使用 jquery mobile 时仍然适用于我：jsfiddle.net/j7u4oj98 这是因为您的 jquery 妨碍了您 - 没有一个选项是可见的，正如您在检查时看到的那样，您看到的内容在一些单独的span above i> #select3。选择该跨度并更改其 textContent。
我正在使用 $(document).ready 所以选项正在显示。但它没有通过 window.onload 显示。我可以看到 #select3 上方的跨度，但不确定更改其 textContent 是什么意思。如何解决这个问题。
document.querySelector('#select3').previousElementSibling.textContent = 'Select';以上是关于每当我更改第一个下拉列表中的选项时，需要 jquery 将第二个下拉列表的默认选项更改为“选择”的主要内容，如果未能解决你的问题，请参考以下文章
当第一个选择的项目框 1 更改时重置选项下拉菜单 2 mysql