与 json 和选择的依赖关系

Dependency with json and select

本文关键字：依赖 关系 选择 json      更新时间：2023-09-26

>我有一个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>

例如，我想

：

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

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

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

使用来自 JSON 的依赖项。

如何在不使用 AJAX 的情况下制作它？

如果你手边有对象，你不需要使用 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});
    }));
});

小提琴

相关文章：