依賴使用JSON和選擇

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> 

我想，例如：

如果我選擇＃主選擇A然後這應該隱藏4，5，6，7和8中選擇＃子

如果我在選擇＃主選擇B，則此應隱藏1，2，3，7及8中選擇＃子

如果我選擇C在選擇＃主，那麼這應該隱藏1,2,3,4,5和6在選擇＃sub

使用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}); 
    })); 
}); 

Fiddle