Adding options of select dynamically from array from java script

Question

I have 2 select input in my HTML page

<select id="parent">
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

And

<select name="selectOpt" id="dmSelect">
<option disabled selected >-Select an Option-</option>
</select>

Now I need add some option depending on the value of parent

suppose if one is selected options of selectOpt will be

<option value="a1">a1</option>
<option value="a2">a2</option>

and if two is selected options of selectOpt will be

<option value="b1">b1</option>
<option value="b2">b2</option>

and these options will come from some array
for like

A=["a1","a2"...]
B=["b1","b2"...]

i can get the selected value of parent using jquery and can append html to any element using ("#..").append(). — Saif
– Saif, Commented Sep 2, 2014 at 6:13

VPK · Accepted Answer · 2014-09-02 06:13:41Z

2

Do something like this,

$('#parent').on('change', function(e) {
    var that = $(this).val();
    switch(that) {
        case 1:
            $("#dmSelect").append(
            $('<option/>', {
                value: a1,
                html: a1
            },{
                value: a2,
                html: a2
            })
            );
        });
            break;
        case 2:
            $("#dmSelect").append(
            $('<option/>', {
                value: b1,
                html: b1
            },{
                value: b2,
                html: b2
            })
            );
        });
            break;
        default:
            //default code block
    }

answered Sep 2, 2014 at 6:13

VPK

3,0781 gold badge30 silver badges36 bronze badges

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

3 Comments

Saif Over a year ago

well this is helpful, no how can i set the values from and array like A=["a1","a2"...] B=["b1","b2"]

Satpal Over a year ago

@Saif, Array is like A=["a1","a2"...] use correct notation and Vaibhav has given you way forward, extend it for your requirement. What do you expect? If you want compelete work then hire some developers.

VPK Over a year ago

You can use your selected value from parent select element as an index to fetch values from your array, like A[that].. @Saif if you find my answer helpful then you can accept it.

Asif · Accepted Answer · 2014-09-03 04:19:57Z

0

Two Arrays:

A=[{display: "a1", value: "a1" },
  {display: "a2", value: "a2" },
   ........
   ]

B=[{display: "b1", value: "b1" },
{display: "b2", value: "b2" },
 ........
 ]

Now on change

$('#parent').change(function() {
var parent = $(this).val();
$("#dmSelect").html("");`

switch(parent) {
    case 1:
        $(A).each(function (i) 
        { 
        $("#dmSelect").append("<option value=\""+A[i].value+"\">"+A[i].display+"           </option>");
        });

        break;
    case 2:
        $(B).each(function (i) 
        { 
        $("#dmSelect").append("<option value=\""+B[i].value+"\">"+B[i].display+"</option>");
        });

        break;
      default:
     }
});

edited Sep 3, 2014 at 4:19

answered Sep 3, 2014 at 4:07

Asif

163 bronze badges

Comments

Abdul Jabbar · Accepted Answer · 2014-09-02 06:12:28Z

Here's how you'd do it with plain javascript:

<select id="parent" onChange="addOption()">
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

then in script:

function addOption(){
  var e = document.getElementById("parent");
  var strUser = e.options[e.selectedIndex].text;

  if(strUser == 'One'){
     selecOpt = document.getElementById('dmSelect');

     var opt = document.createElement('option');
     opt.value = 'a1';
     opt.innerHTML = a1;
     selecOpt.appendChild(opt);

     opt = document.createElement('option');
     opt.value = 'a2';
     opt.innerHTML = a2;
     selecOpt.appendChild(opt);

  }
  else if(strUser == 'Two'){
     selecOpt = document.getElementById('dmSelect');

     var opt = document.createElement('option');
     opt.value = 'b1';
     opt.innerHTML = b1;
     selecOpt.appendChild(opt);

     opt = document.createElement('option');
     opt.value = 'b2';
     opt.innerHTML = b2;
     selecOpt.appendChild(opt);

  }
}

TeeDeJee · Accepted Answer · 2014-09-02 06:13:42Z

0

You should try to solve the problem yourself and if your stuck, we can help.

First you need to make a function that triggers on the change of the value of your select change(). Then you need to get the value of this select val(). Next you compare the value and depending of the value you append() your options to the next select.

If you try something first we can help you and you'll learn a lot more then just copy paste.

answered Sep 2, 2014 at 6:13

TeeDeJee

3,7391 gold badge19 silver badges24 bronze badges

Comments

teshvenk · Accepted Answer · 2014-09-02 06:14:42Z

0

Here is the sample code. Here I have appended new values. Instead of that by making ajax call you can get options values from db too.

$("#parent").on("change",function(){
if ( $(this).val() == "one")
{
var newValue = '<option value="b1">b1</option>';
newValue += '<option value="b2">b2</option>';
$("#dmSelect").append(newValue);
}
});

answered Sep 2, 2014 at 6:14

teshvenk

4033 silver badges8 bronze badges

Comments

vikrant singh · Accepted Answer · 2014-09-02 06:19:48Z

0

$(document).ready(function () {
    $("#parent").change(function () {
        var $dmSelect = $("#dmSelect");
        $dmSelect.empty().append("<option disabled selected >-Select an Option-</option>")
        if ($(this).find("option:selected").val() == "1") {
            $dmSelect.append("<option value='a1'>A1</option>")
                .append("<option value='a2'>A2</option>")
        } else if ($(this).find("option:selected").val() == "2") {
            $dmSelect.append("<option value='b1'>B1</option>")
                .append("<option value='b2'>B2</option>")
        } 
        /*other if elses*/


    }).change();
});

Here's the fiddle http://jsfiddle.net/vikrant47/spcmLydq/

answered Sep 2, 2014 at 6:19

vikrant singh

2,1111 gold badge12 silver badges16 bronze badges

Comments

flowstoneknight · Accepted Answer · 2014-09-02 07:06:06Z

Here's a solution that you can easily adapt to your needs, reading the secondary options from some arrays.

JS:

//make one array from all your sub-arrays
var A = ['a1','a2','a3'];
var B = ['b1','b2'];
var arr = [A,B];

//grabs the first sub-array by default
$(function() {changeOpts(1);});

//changing the parent grabs the appropriate sub-array
$('#parent').on('change', function() {
    changeOpts($(this).val());
});

//forms a string with a bunch of <option> tags, then puts that inside #dmSelect    
function changeOpts(parentOpt) {
    var str = '<option disabled selected >-Select an Option-</option>';
    var arr2 = arr[parentOpt-1];
    var len = arr2.length;
    for (var i=0; i<len; i++) {
        var value = arr2[i];
        str += '<option value="' + value + '">' + value + '</option>';
    }
    $('#dmSelect').html(str);
}

Here's a fiddle.

Collectives™ on Stack Overflow

Adding options of select dynamically from array from java script

7 Answers 7

3 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

3 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related