Home/ Questions/Q 9060859
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T15:20:25+00:00

Each radio buttons upon selected has its own select options, please see my code

  • 0

Each radio buttons upon selected has its own select options, please see my code below.

Using jQuery, please can someone help me get it working?

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You should put your code within document ready handler, note that :radio selector is deprecated.

    $(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);
      }
  });
});
    • 0