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＆amp; C隐藏在第二场＆amp;如果我从第一个字段中选择B或D，那么B＆amp; 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()。{ / p>

<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

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

1 个答案: