Question

我的要求很小。我需要根据所选选项显示和隐藏div。下面是我的代码。当我选择“全部”选项时，何显示所有绿色和红色的类div。它适用于红色和绿色选项。预先感谢。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="colorselector">
            <option>Choose Color</option>
            <option value="all">All</option>
    		<option value="red">Red</option>
            <option value="green">Green</option>
    </select>
    <div class="red box">You have selected <strong>red option</strong> so i am here</div>
    <div class="green box">You have selected <strong>green option</strong> so i am here</div>


<script type="text/javascript">
$(function() {
  $('#colorselector').change(function(){
    $('.box').hide();
    $('.' + $(this).val()).show();
	
  });
});
</script>


    .box{
        color: #fff;
        display: none;
        margin-top: 20px;
    }
    .red{ background: #ff0000; }
    .green{ background: #228B22; }

Answer 1

尝试以下代码：

<select id="colorselector">
            <option>Choose Color</option>
            <option value="all">All</option>
            <option value="red">Red</option>
            <option value="green">Green</option>
    </select>
    <div class="red box">You have selected <strong>red option</strong> so i am here</div>
    <div class="green box">You have selected <strong>green option</strong> so i am here</div>

脚本：

<script type="text/javascript">
$(function() {
 $('#colorselector').on('change', function() {
  var data = $(this).val();
 if( data =='red')
 {
  $('.green').hide();
  $('.red').show();
 }
 else if($(this).val() =='green')
 {
  $('.green').show();
  $('.red').hide();
 }
 else
 {
  $('.green').show();
  $('.red').show();
 }
});
});
</script>

Answer 2

使用if语句检测用户是否选择“全部”。请检查以下代码。

$(function() {
  $('#colorselector').change(function(){

    $('.box').hide();

    //if user is selecting 'all', show all boxes
    if($(this).val() == 'all'){

        $('.box').show()

    //otherwise only show the color they select
    } else {

      $('.' + $(this).val()).show();

    }


  });
});

这是工作中的JS Fiddle Example

Answer 3

由于您只有一个“全部”选项，因此可以执行“如果”来检查是否按下了该选项：

$(function() {
  $('#colorselector').change(function(){
    if($(this).val()=="all"){
      $('.box').show();
    }else{
      $('.box').hide();
      $('.' + $(this).val()).show();
    }
  });
});

选择“全部”选项时如何显示/隐藏div

3 个答案: