1

選択した各ラジオ ボタンには、独自の選択オプションがあります。以下のコードを参照してください。

jQueryを使用して、誰かがそれを機能させるのを手伝ってくれませんか?

<HEAD>

<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">

  $('#machines input:radio').change(function() {

      var selectedVal = $("#machines input:radio:checked").val();
      if(1 == selectedVal){
          var bikeList = '<select name="Bikes"><option>Ducati</option><option>Kawasaki</option></select>';
          $('select').remove();
          $('#selectList').append(bikeList);
      }else if(2 == selectedVal){
          var carList = '<select name="Cars"><option>Audi</option><option>Nissan</option></select>';
          $('select').remove();
          $('#selectList').append(carList);
      }

  });
</script>

</HEAD>

<BODY>
  <div id="machines">
    <input type="radio" name="category" value="1" />Bikes 
    <input type="radio" name="category" value="2" />Cars
  </div>
  <div id="selectList"></div>

​&lt;/BODY>
4

3 に答える 3

1

さて、私たちがデザインで修正できる他のものがあります。ただし、コードを機能させるためにコードに加えた変更をできるだけ少なくすると、学習しやすくなると思います。楽しみ。

<HEAD>

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $('#machines input:radio').change(function() {
      var selectedVal = $("#machines input:radio:checked").val();
      if(1 == selectedVal){
      var bikeList = '<select name="Bikes"><option>Ducati</option><option>Kawasaki</option></select>';
      $('#selectList').html(bikeList);
      }else if(2 == selectedVal){
      var carList = '<select name="Cars"><option>Audi</option><option>Nissan</option></select>';
      $('#selectList').html(carList);
      }

  });
});
</script>

</HEAD>

<BODY>
  <div id="machines">
    <input type="radio" name="category" value="1" />Bikes 
    <input type="radio" name="category" value="2" />Cars
  </div>
  <div id="selectList"></div>

​&lt;/BODY>
于 2013-01-01T15:00:18.513 に答える
1

使用する

$(document).ready(function(){
 // your code here
});

または、スクリプトを2つのラジオボタンの下に置きます

<HEAD>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
</HEAD>

<BODY>
  <div id="machines">
    <input type="radio" name="category" value="1" />Bikes 
    <input type="radio" name="category" value="2" />Cars
  </div>
  <div id="selectList"></div>


<script type="text/javascript">
  $('#machines input:radio').change(function() {
      var selectedVal = $("#machines input:radio:checked").val();
      if(1 == selectedVal){
          var bikeList = '<select name="Bikes"><option>Ducati</option><option>Kawasaki</option></select>';
          $('select').remove();
          $('#selectList').append(bikeList);
      }else if(2 == selectedVal){
          var carList = '<select name="Cars"><option>Audi</option><option>Nissan</option></select>';
          $('select').remove();
          $('#selectList').append(carList);
      }
  });
</script>

​&lt;/BODY>
于 2013-01-01T15:01:15.653 に答える
1

コードをドキュメント対応ハンドラー内に配置する必要があります:radio。セレクターは非推奨であることに注意してください。

$(document).ready(function(){
   var $list = $('#selectList'); // you can cache the object for better performace
   $('#machines input[type=radio]').change(function() {
      var selectedVal = this.value; // you can use `this` which refers to the currect input
      if (1 == selectedVal) {
          var bikeList = '<select name="Bikes"><option>Ducati</option><option>Kawasaki</option></select>';
          $list.html(bikeList);
      } else if (2 == selectedVal) {
          var carList = '<select name="Cars"><option>Audi</option><option>Nissan</option></select>';
          $list.html(carList);
      }
  });
});
于 2013-01-01T14:57:59.363 に答える