Javascriptは、連動メニューを更新しない方法を実現します.
20701 ワード
連動メニューとは、次のドロップダウン枠のオプションが前のプルダウン枠の選択された値によって決定されます.典型的な応用は省市連動メニューです.市のプルダウンオプションはどの省を選んだかによって決められます.似たような需要はよくあります.多くの新米がこの問題に悩まされたと信じています.
実は、連動メニューの実現原理はとても簡単です.ここでは連動メニューの実現方法を詳しく紹介します.原理が分かりました.XML、データベースからロードされた無限級連動メニューを簡単に作成できます.
連動メニューの実現方法:
1.データフォーマットを決定する:
まず、作成について紹介します. Option の構文:
コード:
var newOption = new Option(optionText) optionvalue
上の文法によって、私達は知っています. プロジェクト オプション optionText 和 optionvalue 二つの内容、optionText つまり、私たちが見ているオプションをプルダウンします. optionvalue は、提出された実際の値です.例えばオプションを見たら 「北京」で、実際に提出した値は 010です
一致を保つために、私たちはオプションの書式を決めます.
コード:
｛txt:「オプション名」、 val:「オプション値」｝
オプショングループは、
コード:
var チルドレール = []
チルドレール['父オプション値1'] = ［
｛txt:「オプション名1」、 val:「オプション値1」｝
｛txt:「オプション名2」、 val:「オプション値2」｝
｛txt:「オプション名3」、 val:「オプション値3」｝
...
｛txt:「オプション名n」、 val:「オプション値n」｝
」
チルドレール['父オプション値2'] = ［
｛txt:「オプション名1」、 val:「オプション値1」｝
｛txt:「オプション名2」、 val:「オプション値2」｝
｛txt:「オプション名3」、 val:「オプション値3」｝
...
｛txt:「オプション名n」、 val:「オプション値n」｝
」
「親オプション値」は親プルダウンリストで選択された値です.
注意: ] 和 {} の値は「,」です. (コンマ)で区切られていますが、最後の値の後ろにはありません. 「…」 (コンマ)ではないと文法が間違っています. PHP プログラマは特に注意してください. !!!
2.入力された配列からオプションリストを作成します.
コード:
for (var i=0; i < len; i++)
{
selectObj.options[i] = new Option(optionList[i].txt、 optionList[i].val;
)
3.オプションを設定する前に、既存のオプションをクリアする必要があります.
コード:
機能 removeOptions(selectObj)
{
if (typeof selectObj != 'object
{
selectObj = Dcument.getElemenntById(selectObj)
}
// 既存のオプション数
var len = selectObj.options.length;
for (var i=0; i < len; i++)
{
// 現在のオプションを削除
selectObj.options[0] = null
}
)
ここは使わないです. selectObj.options[
i) 使うのです selectObj.options[
0) ,によって options[0] 削除したら、後のオプションが追加されますので、私達は必要なだけです. selectObj.options[0] = null .
4.ヒントの選択項目とデフォルトの選択項目を設定します.
通常、私たちはプルダウンリストに「都市を選択してください」というような選択項目を設定します.このオプションの値は空です.機能はユーザに選択操作を実行するように促すだけです.
また、ドロップダウンリストには、デフォルトの選択項目、つまりページローディング時に選択状態の項目を設定することも必要です.
完全コードは以下の通りです.
Javascript:
HTML:
実は、連動メニューの実現原理はとても簡単です.ここでは連動メニューの実現方法を詳しく紹介します.原理が分かりました.XML、データベースからロードされた無限級連動メニューを簡単に作成できます.
連動メニューの実現方法:
1.データフォーマットを決定する:
まず、作成について紹介します. Option の構文:
コード:
var newOption = new Option(optionText) optionvalue
上の文法によって、私達は知っています. プロジェクト オプション optionText 和 optionvalue 二つの内容、optionText つまり、私たちが見ているオプションをプルダウンします. optionvalue は、提出された実際の値です.例えばオプションを見たら 「北京」で、実際に提出した値は 010です
一致を保つために、私たちはオプションの書式を決めます.
コード:
｛txt:「オプション名」、 val:「オプション値」｝
オプショングループは、
コード:
var チルドレール = []
チルドレール['父オプション値1'] = ［
｛txt:「オプション名1」、 val:「オプション値1」｝
｛txt:「オプション名2」、 val:「オプション値2」｝
｛txt:「オプション名3」、 val:「オプション値3」｝
...
｛txt:「オプション名n」、 val:「オプション値n」｝
」
チルドレール['父オプション値2'] = ［
｛txt:「オプション名1」、 val:「オプション値1」｝
｛txt:「オプション名2」、 val:「オプション値2」｝
｛txt:「オプション名3」、 val:「オプション値3」｝
...
｛txt:「オプション名n」、 val:「オプション値n」｝
」
「親オプション値」は親プルダウンリストで選択された値です.
注意: ] 和 {} の値は「,」です. (コンマ)で区切られていますが、最後の値の後ろにはありません. 「…」 (コンマ)ではないと文法が間違っています. PHP プログラマは特に注意してください. !!!
2.入力された配列からオプションリストを作成します.
コード:
for (var i=0; i < len; i++)
{
selectObj.options[i] = new Option(optionList[i].txt、 optionList[i].val;
)
3.オプションを設定する前に、既存のオプションをクリアする必要があります.
コード:
機能 removeOptions(selectObj)
{
if (typeof selectObj != 'object
{
selectObj = Dcument.getElemenntById(selectObj)
}
// 既存のオプション数
var len = selectObj.options.length;
for (var i=0; i < len; i++)
{
// 現在のオプションを削除
selectObj.options[0] = null
}
)
ここは使わないです. selectObj.options[
i) 使うのです selectObj.options[
0) ,によって options[0] 削除したら、後のオプションが追加されますので、私達は必要なだけです. selectObj.options[0] = null .
4.ヒントの選択項目とデフォルトの選択項目を設定します.
通常、私たちはプルダウンリストに「都市を選択してください」というような選択項目を設定します.このオプションの値は空です.機能はユーザに選択操作を実行するように促すだけです.
また、ドロップダウンリストには、デフォルトの選択項目、つまりページローディング時に選択状態の項目を設定することも必要です.
完全コードは以下の通りです.
Javascript:
-
-
<script language=
"JavaScript" type=
"text/javascript">
-
<!--
-
-
/*
-
* ：
-
* ：CodeBit.cn ( http://www.CodeBit.cn )
-
*
-
* @param {String || Object]} selectObj ，
-
*/
-
function removeOptions
(selectObj
)
-
{
-
if
(
typeof selectObj !=
'object'
)
-
{
-
selectObj = document.
getElementById
(selectObj
);
-
}
-
-
//
-
var len = selectObj.
options.
length;
-
-
for
(
var i=
0; i < len; i++
)
-
{
-
//
-
selectObj.
options
[
0
] =
null;
-
}
-
}
-
-
/*
-
* ：
-
* ：CodeBit.cn ( http://www.CodeBit.cn )
-
*
-
* @param {String || Object]} selectObj ，
-
* @param {Array} optionList ：[{txt:' ', val:'010'}, {txt:' ', val:'020'}] ，
-
* @param {String} firstOption ， ：“ ”， ，
-
* @param {String} selected ，
-
*/
-
function setSelectOption
(selectObj, optionList, firstOption, selected
)
-
{
-
if
(
typeof selectObj !=
'object'
)
-
{
-
selectObj = document.
getElementById
(selectObj
);
-
}
-
-
//
-
removeOptions
(selectObj
);
-
-
//
-
var start =
0;
-
-
//
-
if
(firstOption
)
-
{
-
selectObj.
options
[
0
] =
new Option
(firstOption,
''
);
-
-
// 1
-
start ++;
-
}
-
-
var len = optionList.
length;
-
-
for
(
var i=
0; i < len; i++
)
-
{
-
// option
-
selectObj.
options
[start
] =
new Option
(optionList
[i
].
txt, optionList
[i
].
val
);
-
-
//
-
if
(selected == optionList
[i
].
val
)
-
{
-
selectObj.
options
[start
].
selected =
true;
-
}
-
-
// 1
-
start ++;
-
}
-
-
}
-
-
//-->
-
</script>
-
-
HTML:
-
-
<script language="JavaScript" type="text/javascript">
-
-
var cityArr = [];
-
cityArr[' '] = [
-
{txt:' ', val:' '},
-
{txt:' ', val:' '},
-
{txt:' ', val:' '},
-
{txt:' ', val:' '},
-
{txt:' ', val:' '},
-
{txt:' ', val:' '},
-
{txt:' ', val:' '},
-
{txt:' ', val:' '},
-
{txt:' ', val:' '}
-
];
-
cityArr[' '] = [
-
{txt:' ', val:' '},
-
{txt:' ', val:' '},
-
{txt:' ', val:' '},
-
{txt:' ', val:' '}
-
];
-
-
function setCity(province)
-
{
-
setSelectOption('city', cityArr[province], '- -');
-
}
-
-
</script>
-
-
<select name="province" id="province" onchange="if(this.value != '') setCity(this.options[this.selectedIndex].value);">
-
<option value="">- -
</option>
-
<option value=" ">
</option>
-
<option value=" ">
</option>
-
</select>
-
-
<select name="city" id="city">
-
<option value="">- -
</option>
-
</select>
-
-