Question

I have a form containing two radio button, one select box and two arrays.
If I select first radio button then the select box values should be populated with array1 and if radio button 2 is selected then select box should be populated with 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>

I got the values of radio button, but how I’ll populate select box with array values?

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.