Question

我有一个包含两个单选按钮，一个选择框和两个数组的表单。如果我选择第一个单选按钮，则应使用array1填充选择框值，如果选择了单选按钮2，则应使用array2填充选择框。

<script type="text/javascript">
  var array1=["1","2","3"];
  var array2=["4","5","6"];
</script>

<form name="form" id="form">
  Radio button 1<input name="btn1" id="a1" type="radio" value="Radio button 1">
  Radio button 2<input name="btn1" id="a2" type="radio" value="Radio button 2" />

  <select id="s1" name="myname">
    <option selected></option>
  </select> 
</form>

<script type="text/javascript">
  $(document).ready(function(){

    $('#a1').change(function() {
      alert('do array1'); 
    });

    $('#a2').change(function() {
      alert('do array2');
    });

  })           
</script>

我得到了单选按钮的值，但是我将如何使用数组值填充选择框？

Answer 1

jquery的

var array1=["1","2","3"];
var array2=["4","5","6"];

var map = { a1 : array1, a2 : array2 };

$('#a1, #a2').change(function() {
    $("#s1 option").remove();
    $.each(map[this.id], function(i, val) {
        var opt = $("<option />");
        opt.appendTo($("#s1")).text(val).val(val);
    });
});

HTML

Radio 1<input name="btn1" id="a1" type="radio" value="Radio button 1" />
Radio 2<input name="btn1" id="a2" type="radio" value="Radio button 2" />
<select id="s1" name="myname">
<option selected></option>
</select>

You can try it here.

Answer 2

$(document).ready(function(){

    $('input[name=btn1]').change(function(){
        var arr = [];
        if($(this).attr('id') == 'a1')
            arr = array1;
        else
            arr = array2;

        $('select#s1 option').remove();
        $.each(arr, function(index, item){
            $('select#s1').append('<option value="'+item+'">'+item+'</option>"');
        });
    });

});

Answer 3

$("#radio_button").change(function(){
      $("option","#select_element").remove();
      var select_options = $("#select_element").attr("options");
      $.each(array,function()
      {
        select_options[select_options.length] = new Option(this[1],this[0],false,false);
      });

});

Answer 4

为了保持值的组织性和可读性，您可以使用像这样的单选按钮值属性...

<input name="btn1" id="a1" type="radio" value="1,2,3" />
<input name="btn1" id="a2" type="radio" value="4,5,6" />

并且如此管理变化..

$("[name='btn1']").change(function (e) {
    var array = $(this).val().split(",");

    $("#s1").empty();

    $.each(array, function (index, value) {
       $("<option />").appendTo("#s1").text(value).val(value);
    });
});

这样你就不会得到“漂浮”的变量。

使用数组填充选择框

4 个答案:

jquery的

HTML