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

您应该将代码放在文档就绪处理程序中，注意: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 回答
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 回答