使用jquery如何自动删除下拉列表中的第一个空白选项(如果它依赖于另一个选项）

Using jquery how to automatically remove the first blank option in dropdown list if it depended on another choice

本文关键字：选项 如果 依赖于 另一个 空白 第一个 何自动 jquery 删除 下拉列表 使用      更新时间：2023-09-26

我有3个下拉列表。第一个id为"q1"，第二个为"q2"，第三个为"qc"。当用户从"q1"中选择一个选项时，会显示"q2"选项，当用户从"q2"中选择选项时，则会显示"q3"选项。问题是当用户从"q1"中选择一个选项时，如何删除"q2"中的第一个空白选项，以及当用户从"q2"中选择一项选项时，该如何删除"q3"中的第一项。我试过这个代码，它从"q2"中删除了第一个空白选项，但在我从"q1"中选择后，我需要它删除，以直接显示没有空白选项的内容。

$("#q1 select").change(function(){      
$('#q1 select option').filter(function() {
  return !this.value || $.trim(this.value).length == 0;
})
.remove();
$('#q2 select option').filter(function() {
  return !this.value || $.trim(this.value).length == 0;
})
.remove();
$('#q3 select option').filter(function() {
  return !this.value || $.trim(this.value).length == 0;
})
.remove();
});
 $("#q2 select").change(function(){    
 $('#q2 select option').filter(function() {
  return !this.value || $.trim(this.value).length == 0;
})
.remove();
$('#q3 select option').filter(function() {
  return !this.value || $.trim(this.value).length == 0;
})
.remove();
});

这个代码怎么样：

$(function(){
  $("#q1").change(function(){
  	if($("#q2 option")[0].value == "")
			$("#q2 option")[0].remove();
  });
  $("#q2").change(function(){
		if($("#q3 option")[0].value == "")
			$("#q3 option")[0].remove();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<p>
<select id="q1">
  <option value="">Select...</option>
  <option value="volvo">1</option>
  <option value="saab">2</option>
  <option value="opel">3</option>
</select>
</p>
<p>
<select id="q2">
  <option value="">Select...</option>
  <option value="volvo">4</option>
  <option value="saab">5</option>
  <option value="opel">6</option>
</select>
</p>
<p>
<select id="q3">
  <option value="">Select...</option>
  <option value="volvo">7</option>
  <option value="saab">8</option>
  <option value="opel">9</option>
</select>
</p>
</body>

相关文章：