Jquery:选择菜单以显示和隐藏某些div元素

Question

我正在寻找创建一个选择菜单,根据所选选项显示和隐藏某些div; 这样的事情:

<select name="choose_colors" id="color_selector">
  <option value="select_color">Select color</option>
  <option value="red">Choose Red</option>
  <option value="blue">Choose Blue</option>
  <option value="green">Choose Green</option>
</select>

<div id="red_options" class="color_options">
  ...
</div>

<div id="blue_options" class="color_options">
  ...
</div>

<div id="green_options" class="color_options">
  ...
</div>

因此,如果使用选择"选择红色",则会显示#red_options的div,并且#blue_options和#green_options将隐藏.

如果用户返回默认选项"选择颜色",则隐藏#red_options /#blue_options/#green div.

我怎么在Jquery那样做？我以为会是这样的:

<script>
  $(".color_options").hide();

  $('select[name="choose_colors"]').change(function () {
    if ("Select color") {
      $("#red_options").hide();
      $("#blue_options").hide();
      $("#green_options").hide();
    }
    if ("Red") {
      $("#red_options").show();
    }
    if ("Blue") {
      $("#blue_options").show();
    }
    if ("Green") {
      $("#green_options").show();
    }
  });
</script>

当然这不能正常工作.有任何想法吗？

Answer 1

试试这个:

$("#color_selector").change(function() {
  $(".color_options").hide();
  $("#" + $(this).val() + "_options").show();
}

这利用了下拉值中的匹配以及您如何命名div,例如red=red_options