根据单选按钮更改下拉值

Question

这是一个任务，当我选择“12 小时”单选按钮然后在上午 1 点至下午 12 点和下午 1 点至下午 12 点下拉值变化，当我选择 24 小时时，我的值在 1-24 变化。

我的代码是：

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
  var listA = [{name:'1am', value:'1am'}, {name:'2am', value:'2am'}, {name:'3am', value:'3am'}];

  var listB = [{name:'12', value:'12'}, {name:'13', value:'13'}, {name:'14', value:'14'}];
</script>
<script>
  $(document).ready( function() {
    $(':radio').bind('click',function(){
      $('#describe')
        .find('option')
        .remove()
        .end();
      $.each(listA, function(index, value) {
        $('#describe').append('<option value="'+value.value+'">'+value.name+'</option>');
      });
    });
  });
</script>

为此的HTML代码：

<div>
  <select id="describe">
    <option name="name" value="1">a</option>
    <option name="name" value="2">b</option>
  </select>
</div>
<div>
  <input type="radio" id="class" name="type" value="1" checked>12 hour <br/>
  <input type="radio" id="Club" name="type" value="2" >24 hour<br/>
</div>

希望你能理解我的问题。

Answer 1

你可以有这样的东西：

<script>
  var listA = [{name:'1am', value:'1am'}, {name:'2am', value:'2am'}, {name:'3am', value:'3am'}];
  var listB = [{name:'12', value:'12'}, {name:'13', value:'13'}, {name:'14', value:'14'}];
</script>

<script>
  $(document).ready( function() {
    $('#class').bind('click', function() {
      $('#describe').empty();                              
      $.each(listA, function(index, value) {
        $('#describe').append('<option value="'+value.value+'">'+value.name+'</option>');
      });
    });

    $('#Club').bind('click', function(){
      $('#describe').empty();                              
      $.each(listB, function(index, value) {
        $('#describe').append('<option value="'+value.value+'">'+value.name+'</option>');
      });
    });
  });
</script>

希望对你有所帮助。

Answer 2

试试这个

HTML

<div>
  <select id="describe">
    <option name="name" value="1">a</option>
    <option name="name" value="2">b</option>
  </select>
</div>
<div>
  <input type="radio" id="class" name="chk" value="12" checked>12 hour <br/>
  <input type="radio" id="Club" name="chk" value="24" >24 hour<br/>
</div>

脚本

var listA = [{name:'1am', value:'1am'}, {name:'2am', value:'2am'}, {name:'3am', value:'3am'}];

 var listB = [{name:'12', value:'12'}, {name:'13', value:'13'}, {name:'14', value:'14'}];

  $(document).ready( function() {
      $("input[name='chk']").on('change',function() {

          if($(this).is(':checked') && $(this).val() == '12')
          {
            $('#describe').empty()
            $.each(listA, function(index, value) {
             $('#describe').append('<option value="'+value.value+'">'+value.name+'</option>');
            });                  
          }
          else if($(this).is(':checked') && $(this).val() == '24')
          {
            $('#describe').empty()
            $.each(listB, function(index, value) {
             $('#describe').append('<option value="'+value.value+'">'+value.name+'</option>');
            }); 
          }
          else
          {

          }

    });
 });  

DEMO

Answer 3

您只需要更改现有代码的 3 行

先将两个列表合二为一，像这样

var list = [ 
  [{name:'1am', value:'1am'}, {name:'2am', value:'2am'}, {name:'3am', value:'3am'}],
  [{name:'12', value:'12'}, {name:'13', value:'13'}, {name:'14', value:'14'}]
];

然后在单选点击事件中，获取单选按钮索引，像这样

  var index = $(this).val()-1;

然后用上面的列表改变你的列表，像这样

   $(document).ready( function() {
      $("input[type='radio']").on('change',function() {
          var index = $(this).val()-1;
          $('#describe').empty()
          $.each(list[index], function(index, value) {
           $('#describe').append('<option value="'+value.value+'">'+value.name+'</option>');  
          });
      });
});  

Answer 4

$('#describe').val($(this).val());