根据以前的选择隐藏选择选项

Question

是否可以根据用户从上一个下拉列表中选择的内容(例如：

如果用户是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>

​

Answer 2

你可以做一些类似于下面的事情

​

$(document).on('change', '.age', function(e){
  
  var val = $(this).val();
  var subject = $('.subject').find(":selected").val();
  
  if(val == 8 && subject == 'English' ){
      $('.location option[value="Two"]').hide();
  } else {
      $('.location option[value="Two"]').show();
  }
 
})
$(document).on('change', '.subject', function(e){
  
   var age = $('.age').find(":selected").val();
  var val = $(this).val();
  
  if(age == 8 && val == 'English' ){
      $('.location option[value="Two"]').hide();
  } else {
      $('.location option[value="Two"]').show();
  }
 
})

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

<select name="subject" class="subject">
  <option value="English">English</8>
  <option value="Maths">Maths</8>
  <option value="Science">Science</8>
</select>

<select name="location" class="location">
  <option value="One">Location One</8>
  <option value="Two">Location Two</8>
  <option value="Three">Location Three</8>
</select>

​

Answer 3

使用jQuery，您可以使用.hide()和.show()来切换元素的可见性。但是，首先，您可以检查select (例如年龄)的值是否被更改。例如，根据您希望拥有的逻辑，您可以检查更改的值，如果它与条件匹配，则执行一些操作。

例如：

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

但是，请注意，我为"Location 2“选项(”Loce-2“)和年龄选择元素添加了一个id。此外，要使这一工作正常进行，您必须修复这些值，使它们不是全部8，并修复元素的结束标记(not )。