0

しばらくここを見て回っていましたが、必要なものが見つかりませんでした。

何人かの先生がいるドロップダウンがあります。2番目のリストには、彼/彼女が教えるコースが含まれている必要があります。

だから、少し例：

X氏は数学と生物学を教えています。Y夫人は数学を教えています

最初のリストでXが選択されている場合、2番目のリストには数学と生物学が含まれている必要があります。Yを選択した場合、リストには数学のみを含める必要があります。

PHPの部分であるHTML、CSSは問題ではなく、2番目のリストの「更新/更新」に関するものです。

<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

2つのリスト、leacturer_idとcoure_idは、私のデータベースの情報を動的に生成します。更新したいリストは2番目のcourse_idです。これがより明確になることを願っています。

4

2 に答える 2

3

それは簡単で、他のセレクターを更新する最初のセレクター変更イベントハンドラーにアタッチします。

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();​

デモ

于 2012-12-29T16:24:13.477 に答える
3

選択ボックスのデータをどのように取得するかはわかりませんが、スタートアップ用のコードをいくつか提供します。理解できるように、できるだけシンプルにコーディングしました

//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/

于 2012-12-29T16:25:11.443 に答える