Populate select box with an array

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?

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

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.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered May 25, 2011 at 12:23

karim79

343k67 gold badges420 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Craig Over a year ago

+1 you beat me to...but I did make one additional suggestion.

manji · Accepted Answer · 2011-05-25 12:32:40Z

0

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

});

answered May 25, 2011 at 12:32

manji

48k5 gold badges98 silver badges104 bronze badges

Comments

Aditya Manohar · Accepted Answer · 2011-05-25 12:33:01Z

0

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

});

answered May 25, 2011 at 12:33

Aditya Manohar

2,2471 gold badge17 silver badges20 bronze badges

Comments

Craig · Accepted Answer · 2011-05-25 13:04:02Z

0

To keep the values organized and more readable you could use the radio button value property like this...

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

And managing the change as such..

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

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

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

This way you do not end up with variables "floating" around.

edited May 25, 2011 at 13:04

answered May 25, 2011 at 12:41

Craig

7,0863 gold badges36 silver badges55 bronze badges

Collectives™ on Stack Overflow

Populate select box with an array

4 Answers 4

jquery

html

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

jquery

html

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related