動態選擇選項單選按鈕

選中的每個單選按鈕都有其自己的選擇選項，請參閱下面的我的代碼。動態選擇選項單選按鈕

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

來源

2013-01-01 blsn

什麼是你想達到的腳本？ – undefined

選定的單選按鈕將顯示其對應的下拉框。 – blsn

你應該把你的代碼放在文檔就緒處理程序中，注意: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-01 14:57:59 undefined

那麼，還有其他的東西，我們可以修復的設計。但是我認爲，如果我儘可能少地改變代碼以使其工作，那麼學習起來會更容易。請享用。

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

來源

2013-01-01 15:00:18 Boon

使用

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

來源

2013-01-01 15:01:15 phnkha

動態選擇選項單選按鈕

回答

相關問題