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

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 に答える
0

わかりました..まず..あなた<option val="">は間違っています、に変更してください<option value="">

あなたが望むことを行うことができる答えがいくつかあります.1つは非常に簡単です:

例 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 に答える