Question

这是一个任务，当我选择“12小时”单选按钮然后在凌晨1点到12点和下午1点到12点下拉值更改，当我选择24小时后，我的值在1-24变化。 / p>

我的代码是：

<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

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

Answer 4

您只需更改现有代码的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>');  
          });
      });
});

下拉值根据单选按钮改变

4 个答案: