2

嗨，当您在选择中选择然后显示正确的 div 时，我试图显示相应的 div。例如，在选择中选择飞机，然后显示表示您已选择飞机的 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>

任何帮助将不胜感激，谢谢！

4

4 回答 4

3

你最好给你的选项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");
    });
});

演示

于 2013-09-25T14:16:25.830 回答
1

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>
于 2013-09-25T14:17:36.510 回答
1

工作演示

尝试这个

 $(document).ready(function () {
    $('#' + $('#selection option:selected').text().toLowerCase()).show();
    $('#selection').change(function () {
        $('.op').hide();
        $('#' + $('#selection option:selected').text().toLowerCase()).show();
    });
});
于 2013-09-25T14:24:37.773 回答
0

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

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

示例 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();
      }  
  });
});
于 2013-09-25T14:32:45.680 回答