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/

根据其他列表更新选择列表

2 个答案: