基于先前的选择隐藏选择选项

问题描述 投票:1回答:1

是否可以根据用户从上一个下拉列表中的选择,使用jQuery隐藏选择/下拉列表中的选项,例如:

如果用户是8(年龄选择/下拉),并且选择了主题英语(主题选择/下拉),然后从(位置下拉列表)隐藏位置2?

<select name="age">
<option value="8">8</div>
<option value="9">9</div>
<option value="10">10</div>
<option value="11">11</div>
</select>

<select name="subject">
<option value="eng">English</div>
<option value="maths">Maths</div>
<option value="science">Science</div>
</select>

<select name="subject">
<option value="loc-1">Location One</div>
<option value="loc-2">Location Two</div>
<option value="loc-3">Location Three</div>
</select>

谢谢!

javascript jquery html forms
1个回答
0
投票

使用jQuery,您可以使用.hide().show()来切换元素可见性。但是,首先,您可以检查选择值(例如年龄)是否已更改。例如,根据您想要的逻辑,您可以检查更改的值是什么,并在条件满足时执行某些操作。

例如:

$( "#age-select" ).change(function() {
  var value = $(this).val();
  if(value == 8) {
    $("#location-two").hide();
  } else {
    $("#location-two").show();
  }
});

但是,请注意,我为“位置2”选项(“位置2”)和年龄选择元素添加了id。另外,要使其正常工作,您必须修复值以使它们不全为8,并修复元素的结束标记(不是)。

© www.soinside.com 2019 - 2024. All rights reserved.