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

Answer 2

$("#color_selector").change(function() {
  var color = $(this).val();
  $("div.color_options").hide().filter("#" + color + "_options").show();
});

Answer 3

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

Answer 4

$(".color_options").hide();
$('#color_selector').change(function(){
    var color = $("#color_selector").val();
    $(".color_options").hide();
    $("#" + color + "_options").show();
});

Answer 5

我认为在这种情况下你不应该显示/隐藏不同的div，而是为一个div应用不同的类。

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

5 个答案: