如何在使用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