javascript - 依赖于 json 和 select

Question

我有一个json：

{
    "A": {
        "1": "1",
        "2": "2",
        "3": "3"
    }, 
    "B": {
        "4": "4",
        "5": "5",
        "6": "6"
    }, 
    "C": {
        "7": "7",
        "8": "8"
    }
}

和两个选择：

<select id="main">
  <option></option>
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>

和：

<select id="sub">
  <option></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
</select>

例如，我想：

如果我在 select#main 中选择 A，那么这应该在 select#sub 中隐藏 4、5、6、7 和 8

如果我在 select#main 中选择 B，那么这应该在 select#sub 中隐藏 1、2、3、7 和 8

如果我在 select#main 中选择 C，那么这应该在 select#sub 中隐藏 1、2、3、4、5 和 6

使用来自 json 的依赖。

不使用 AJAX 怎么做？

Answer 1

如果您手边有对象，则不需要使用 AJAX：

尝试

var $sub = $('#sub');
$sub.find('option:gt(0)').remove();
$('#main').on('change', function(){
     var options = opts[this.value];
    $sub.find('option:gt(0)').remove();
    var $this = $(this);
    $sub.append($.map(options, function(i, o){

        return $('<option/>', {value:i, text:o});
    }));
});

小提琴