如何存储数据并根据另一个选择值分配选择选项?

时间:2014-09-09 15:25:44

标签: javascript jquery dictionary

我首先选择多个选项,然后选择另一个选项:

<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

1 个答案:

答案 0 :(得分:2)

你必须这样做:

 $('#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/