如何在使用Select选项时在Jquery中应用显示/隐藏条件？

Question

我有两个选择字段。在第一个领域，我有一些数据。我想通过点击第一个字段选项来隐藏第二个字段的选项。

第一场

<select id="edit-main-field-i-am-field-und" class="form-select required"> 
<option value="_none">- Select a value -</option> 
<option value="sbA">A</option> 
<option value="sdB">B</option> 
<option value="smC">C</option> 
<option value="sbD">D</option> 
</select> 

二野

<select id="edit-main-field-look-for-field-und" class="form-select required"> 
<option value="_none">- Select a value -</option> 
<option value="sbA">A</option> 
<option value="sdB">B</option> 
<option value="smC">C</option> 
<option value="sbD">D</option> 
</select> 

我想如果我从第一场选择A或C，则A & C是从第二场&如果我选择隐藏B或D来自第一场然后B & D从第二场隐藏。我通过JQuery尝试这个，但隐藏添加条件的问题。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script> 
$(function() { 
    $("#edit-main-field-i-am-field-und").change(function() { 
     if($('option:selected', this).text()=="A" || $('option:selected', this).text()=="C") 
     {alert("12345");} 
     else if($('option:selected', this).text()=="B" || $('option:selected', this).text()=="D") 
     {alert("98765");} 

    }); 
}); 
</script> 

请帮忙。由于

Answer 1

试试这个：使用select箱的设定值获得的option和filter()所有选项与匹配text()文本hide()他们。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script> 
$(function(){ 
$("#edit-main-field-i-am-field-und").change(function() { 
    var value = $(this).val(); 
    var optionText = $(this).find('option[value='+value+']').text(); 
    //show all options by default 
    $('#edit-main-field-look-for-field-und').find('option').show(); 

     if(optionText=="A" || optionText=="C") 
     { 
     alert("12345"); 
      $('#edit-main-field-look-for-field-und').find('option').filter(function(){ 
       if($(this).text()=="A" || $(this).text()=="C") 
       return true; 
       else 
       return false; 
      }).hide(); 
     } 
     else 
     { 
      alert("98765"); 
      $('#edit-main-field-look-for-field-und').find('option').filter(function(){ 
       if($(this).text()=="B" || $(this).text()=="D") 
       return true; 
       else 
       return false; 
      }).hide(); 
     } 

    }); 
}); 
</script> 

Demo