Блог

У меня есть форма, содержащая два переключателя, одно поле выбора и два массива. Если я выберу первый переключатель, то значения поля выбора должны быть заполнены 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>
  

Я получил значения переключателя, но как я буду заполнять поле выбора значениями массива?

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> 
  

Вы можете попробовать это здесь.

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

});
  

 $("#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);
      });

});
  

Чтобы значения были упорядочены и более читабельны, вы могли бы использовать свойство значения переключателя следующим образом…

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

Таким образом, вы не получите переменные, «плавающие» вокруг.