如何存儲數據並基於另一個選擇值分配選擇選項？

Question

我首先選擇了多個選項，然后再選擇一個：

<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>
  ...

select2中的可用選項取決於select1所選值。

數據可以以下格式存儲（或其他任何格式，但應將其最小化）：

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

因此，如果在第一個選擇中選擇了值1 ，則select2應該如下所示：

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

我知道如何為select2分配新值，但我不了解如何讀取select2data值-請參閱jsfiddle 。

Answer 1

您必須這樣做：

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

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

演示區：

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