Question

您好我正在尝试显示相应的div，当您在选择中选择然后显示正确的div。例如a选择选择中的平面，然后显示表示已选择平面的div等等。

CSS

#car{
    visibility: hidden;
}

#plane{
    visibility: hidden;
}

#boat{
    visibility: hidden;
}

HTML

<body>

options:<select id='selection'>
    <option val='1' id='1'>Car</option>
    <option val='2' id='2'>Plane</option>
    <option val='3' id='3'>Boat</option>
</select>

<div id='car'>you have chosen a car</div>
<div id='plane'>you have chosen a plane</div>
<div id='boat'>you have chosen a boat</div>


</body>

任何帮助都会非常感谢，谢谢！

Answer 1

您最好提供选项data属性来保存相应的div ID。类似的东西：

<select id='selection'>
    <option val='1' id='1' data-div="car">Car</option>
    <option val='2' id='2' data-div="plane">Plane</option>
    <option val='3' id='3' data-div="boat">Boat</option>
</select>

然后在jQuery中你可以这样做：

$(function () {
    $("#selection").change(function () {
        var divItem = $(this).children("option:selected").data("div");
        $("div:not(#" + divItem + ")").css("visibility", "hidden");
        $("#" + divItem).css("visibility", "visible");
    });
});

DEMO

Answer 2

Live Demo

$(function() {
  $("#selection").on("change", function() {
    var id = $(this).find('option:selected').text().toLowerCase();
    if (id) $("#"+id).show().siblings("div").hide();
  }).trigger("change"); // initialise on load
});

要不依赖于选择中的文本，您可以更改

    var id = $(this).find('option:selected').text().toLowerCase();

在数组中包含div的ID - 这确实意味着可能的重复，但它会将所有依赖项移动到脚本中。

    var id = ["car","plane","boat"][this.selectedIndex];

或者如果你有一个空的第一个选项：

    var id = ["","car","plane","boat"][this.selectedIndex];

完整代码，因为您似乎遇到了jQuery的问题：

<!DOCTYPE html>
<html>
  <meta charset="utf-8">
  <title>Test selections</title>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
      $(function() {
        $("#selection").on("change", function() {
          var text = $(this).find('option:selected').text().toLowerCase();
          if (text) $("#"+text).show().siblings("div").hide();
        }).trigger("change");
      });
    </script>
    </head>
    <body>
      options:<select id='selection'>
        <option value='1'>Car</option>
        <option value='2'>Plane</option>
        <option value='3'>Boat</option>
      </select>

      <div id='car'>you have chosen a car</div>
      <div id='plane'>you have chosen a plane</div>
      <div id='boat'>you have chosen a boat</div>
    </body>
  </html>

Answer 3

正在工作 DEMO

试试这个

 $(document).ready(function () {
    $('#' + $('#selection option:selected').text().toLowerCase()).show();
    $('#selection').change(function () {
        $('.op').hide();
        $('#' + $('#selection option:selected').text().toLowerCase()).show();
    });
});

Answer 4

好的..首先..您的<option val="">不正确，请将其更改为<option value="">

有几个答案可以做你想要的，这是一个非常简单：

Example JSBIN

HTML：

<body>

options: 

  <select id="selection">
     <option value="0">Select</option>
     <option value="1">Car</option>
     <option value="2">Plane</option>
     <option value="3">Boat</option>  
  </select>

<div id='car'>you have chosen a car</div>
<div id='plane'>you have chosen a plane</div>
<div id='boat'>you have chosen a boat</div>

</body>

CSS：

#car, #plane, #boat {

    display: none;
}

jQuery的：

$(function(){

   $("#selection").on("change", function(){

      if ($(this).val() == 0) {

          $("#car, #plane, #boat").hide();

      } else if ($(this).val() == 1) {

          $("#plane, #boat").hide();

          $("#car").fadeIn();

      } else if ($(this).val() == 2) {

          $("#car, #boat").hide();

          $("#plane").fadeIn();

      } else {

          $("#car, #plane").hide();

          $("#boat").fadeIn();
      }  
  });
});

jquery从选定的选项中定位val，然后显示相应的div

4 个答案:

正在工作 DEMO