|
|---|
先にサンプルを見た方がどんなのか分かりやすいと思うので
プルダウンのサンプルを見てください。
簡単に説明すると、HTMLの記述で
プルダウンに設定する値を、連想配列で作成します。
連動する処理を行うjQueryのプラグインの引数に
対象となるselect要素のID、連動するselect要素のID、連動するプルダウンに設定する値を格納した連想配列を渡します。
プラグインの中身はこんな感じです。
// プルダウンの変更を行う
$.fn.pulldownChange = function(targetid, changeid, changeItemArray){
$("#" + targetid).change(function(){
// 対象のプルダウンの値を取得する
value = $(this).val();
// 変更プルダウンのアイテムを削除する
$("#" + changeid).children().remove();
// 配列から対象のプルダウンの配列を取得する
changePulldown = changeItemArray[value];
// セレクトボックスのノードを取得する
changeSellectNode = window.document.getElementById(changeid);
// 配列を使ってプルダウンに値を設定する
for (var i = 0; i < changePulldown.length; i++ ) {
//$("#" + changeid).append("");
changeSellectNode.options[i] = new Option(changePulldown[i][1], changePulldown[i][0]);
}
changeSellectNode.selectedIndex = 0;
});
}
簡単な説明をすると
対象となるプルダウンの値を取得する。
連動するプルダウンの値を削除する。
連想配列から設定するプルダウンの配列を取得する。
配列を使ってプルダウンに値を設定する。
こんな感じです。
実際に確認をしていませんが、IE6だとoptionの追加がうまくいかないらしいので
new Option()を使ってプルダウンの追加をしました。
あんまり確認してないからもしかしたらおかしいところがあるかもしれないです。
この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。
コメント 0