Javascript 下拉值根据单选按钮进行更改_Javascript_Jquery_Html

Javascript 下拉值根据单选按钮进行更改

javascript jquery html

Javascript 下拉值根据单选按钮进行更改,javascript,jquery,html,Javascript,Jquery,Html,这是一项任务，当我选择“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:'3

这是一项任务，当我选择“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>


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'}]；
$（文档）.ready（函数（）{
$（'：radio'）.bind（'click'，function（）{
$（“#描述”）
.find（'选项'）
.删除（）
.end（）；
$.each（列表、函数（索引、值）{
$（'#descripe'）.append（''+value.name+''）；
});
});
});

此文件的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>


A.
B
12小时

24小时

希望你能理解我的问题。

你可以有这样的东西：

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


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'}]；
$（文档）.ready（函数（）{
$（'#class'）.bind（'click'，function（）{
$（'#descripe'）.empty（）；
$.each（列表、函数（索引、值）{
$（'#descripe'）.append（''+value.name+''）；
});
});
$（'#Club'）.bind（'click'，function（）{
$（'#descripe'）.empty（）；
$.each（列表B，函数（索引，值）{
$（'#descripe'）.append（''+value.name+''）；
});
});
});

希望这对你有所帮助。

你可以有这样的东西：

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


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'}]；
$（文档）.ready（函数（）{
$（'#class'）.bind（'click'，function（）{
$（'#descripe'）.empty（）；
$.each（列表、函数（索引、值）{
$（'#descripe'）.append（''+value.name+''）；
});
});
$（'#Club'）.bind（'click'，function（）{
$（'#descripe'）.empty（）；
$.each（列表B，函数（索引，值）{
$（'#descripe'）.append（''+value.name+''）；
});
});
});

希望这对你有帮助。

试试这个

HTML


A.
B
12小时

24小时

剧本

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
          {

          }

    });
 });

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'}]；
$（文档）.ready（函数（）{
$（“input[name='chk']”）。在（'change'，function（）上{
if（$（this）.is（':checked'）&&&$（this.val（）=='12'）
{
$（'#descripe'）.empty（）
$.each（列表、函数（索引、值）{
$（'#descripe'）.append（''+value.name+''）；
});                  
}
else if（$（this）.is（':checked'）&&&$（this.val（）='24'））
{
$（'#descripe'）.empty（）
$.each（列表B，函数（索引，值）{
$（'#descripe'）.append（''+value.name+''）；
}); 
}
其他的
{
}
});
});

试试这个

HTML


A.
B
12小时

24小时

剧本

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
          {

          }

    });
 });

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'}]；
$（文档）.ready（函数（）{
$（“input[name='chk']”）。在（'change'，function（）上{
if（$（this）.is（':checked'）&&&$（this.val（）=='12'）
{
$（'#descripe'）.empty（）
$.each（列表、函数（索引、值）{
$（'#descripe'）.append（''+value.name+''）；
});                  
}
else if（$（this）.is（':checked'）&&&$（this.val（）='24'））
{
$（'#descripe'）.empty（）
$.each（列表B，函数（索引，值）{
$（'#descripe'）.append（''+value.name+''）；
}); 
}
其他的
{
}
});
});

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

然后在单选点击事件中，获取单选按钮索引，如下所示

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>');  
          });
      });
});

然后用上面的列表更改您的列表，如下所示

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>');  
          });
      });
});

$（文档）.ready（函数（）{
$（“输入[type='radio']”）。在（'change'，function（）上{
var index=$（this）.val（）-1；
$（'#descripe'）.empty（）
$.each（列表[索引]、函数（索引、值）{
$（'#descripe'）.append（''+value.name+''）；
});
});
});

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

然后在单选点击事件中，获取单选按钮索引，如下所示

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>');  
          });
      });
});

然后用上面的列表更改您的列表，如下所示

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>');  
          });
      });
});

$（文档）.ready（函数（）{
$（“输入[type='radio']”）。在（'change'，function（）上{
var index=$（this）.val（）-1；
$（'#descripe'）.empty（）
$.each（列表[索引]、函数（索引、值）{
$（'#descripe'）.append（''+value.name+''）；
});
});
});

change$（'#class）.bind（'c to$（'#class'））.bind（'c hanks to you's…：）能否请您帮助解决这个问题change$（'#class）.bind（'c to$（'#class'）.bind（'c hanks to you's…：）请您帮助解决此问题。请尽可能提供fiddle，根据单选按钮测试和更新更改值很容易。当您单击单选按钮1时，下拉列表具有不同的值，如果您选择下拉列表2，则下拉列表的值不同。下拉列表为单个。抱歉，我已启用提供fiddle:（请尽可能提供小提琴，以便根据收音机测试和更新更换值