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

Question

是否可以根据用户从上一个下拉列表中的选择使用 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>

谢谢!

Answer 1

您只需要在下拉列表中添加更改功能，并根据您的要求添加您的逻辑。请参见下面的示例。

$(document).ready(function(){
   $("#age").change(function(){
 hideOption();
   
   })
   $("#subject").change(function(){
   hideOption();
   })
})
function hideOption(){
  var age=$("#age").val();
   var subject=$("#subject").val();
   if(age==8 && subject=="Maths"){
    $("#location [value='Location Two']").hide();
   }
   else{
    $("#location [value='Location Two']").show();
   }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="age" id='age'>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
</select>

<select name="subject" id='subject'>
<option value="English">English</option>
<option value="Maths">Maths</option>
<option value="Science">Science</option>
</select>

<select name="Location" id='location'>
<option value="Location One">Location One</option>
<option value="Location Two">Location Two</option>
<option value="Location Three">Location Three</option>
</select>