Question

选中的每个单选按钮都有自己的选择选项，请参阅下面的代码。

使用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>

</BODY>

Answer 1

您应该将代码放在文档就绪处理程序中，请注意{I}}选择器已弃用。

:radio

Answer 2

嗯，我们可以通过设计解决其他问题。但我认为，如果我对代码进行尽可能少的更改以使其工作，则更容易学习。享受。

<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>

</BODY>

Answer 3

使用

$(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>

</BODY>

动态选择选项单选按钮

3 个答案: