根據另一個列表更新選擇列表

Question

我一直在這裏尋找一段時間，但我沒有真正發現我需要什麼。

我有一些老師在其中的下拉列表。第二個列表應該包含他/她教的課程。

所以，一個小例子：

X先生教數學和生物。 Y女士教數學

如果在第一個列表中選擇了X，第二個列表應該包含數學和生物學。如果選擇Y，則列表只應包含數學。

PHP部分，HTML，CSS不是問題，它只是關於第二個列表的'刷新/更新'。

<select name="lecturer_id" id="lecturer_id"> 
    <option value="22">X</option> 
    <option value="30">Y</option> 
</select> 

我正在尋找一個非常簡單的解決方案，因爲我對JavaScript的知識很差。所以這就是爲什麼我更喜歡jQuery解決方案。

- 更新

的數據從數據庫正在添加。我的應用程序目前生成以下HTML： http://pastebin.com/9rEWKAkF

這兩個列表lecturer_id和coure_id是動態生成的，包含我的數據庫中的信息。我想更新的列表是第二個，course_id。我希望這更清楚。

Answer 1

這很簡單，附加到第一個選擇器更改事件處理程序，它將更新其他選擇器。

HTML：

<select name="lecturer_id" id="lecturer_id"> 
    <option value="22">X</option> 
    <option value="30">Y</option> 
</select> 
<select name="discipline" id="discipline"> 
</select>​​​​​​​​​​​​​​​​​​​​ 

JS：

var teachers = { 
    22: ['math', 'biology'], 
    30: ['math'] 
} 
var dis_update = function() { 

    var lecturer_id = $('#lecturer_id option:selected').val(); 
    var dis = $('#discipline').empty(); 
    for (i in teachers[lecturer_id]) { 
        var d_name = teachers[lecturer_id][i]; 
        dis.append($('<option>').val(d_name).text(d_name)); 
    } 
} 
$('#lecturer_id').change(dis_update); 
dis_update();​ 

DEMO

Answer 2

好吧，我不知道你怎麼會擁有的數據爲您的選擇框，但我會給你一些代碼爲你的啓動。我編寫它儘可能的簡單，所以你可以把它理解

//here is your sample data array 
var data = {"X":['maths','bio'], 
     "Y":['maths']}; 

//the event listener for lecturer selectbox that will listen for selection changes 
$('#lecturer_id').change(function(){ 

//gets the value of the lecturer select box 
var selecti = $('#lecturer_id >option:selected').text(); 
     //ensure to empty the other select box for subjects 
     $('#teaches').empty(); 
     var i = 0 ; 
     //append the subjects of the lecturer on the other select box 
     for(i = 0; i < data[selecti].length; i++){ 
      //add an option element for every item 
     $("#teaches").append('<option>' + data[selecti][i] +'</option>'); 
     } 
}); 

的演示爲您的處置 http://jsfiddle.net/nCA9u/