How to store data and assign select options based on another select value?

Question

I have first select with multiple options and another select:

<select class="form-control" id="select1">
  <option value="">Choose</option>
    <option value="1">select1_option1</option>
    <option value="2">select1_option2</option>
    ...
<select class="form-control" id="select2">
  <option value="">Choose</option>
  ...

Available options in select2 are dependent on chosen value in select1 .

The data could be stored in the following format (or any other, but should be minimized):

var select2data = {1:{11:"select2_option1",12:"select2_option2",13:"select2_option3",14:"select2_option4"},
                   2:{21:"select2_option1",22:"select2_option2"}};

So, if value 1 is chosen in the first select, then select2 should look like below:

<select class="form-control" id="select2">
  <option value="">Choose</option>
  <option value="11">select2_option1</option>
  <option value="12">select2_option2</option>
  ...

I know how to assign new values to the select2 , but I don't understand how to read select2data values - see jsfiddle .

Answer 1

You have to do it this way:

 $('#select2')
        .find('option')
        .remove()
        .end()

    $.each(select2data[value], function (index, item) {
        console.log(item)
        $('#select2').append('<option value="' + index + '">' + item + '</option>')
    })

FIDDLE DEMO:

http://jsfiddle.net/4ujs6jf9/3/