JavaScript連動を実現

連動メニューとは、後のプルダウンボックスのオプションが前のプルダウンボックスが選択された値に基づいて決定されることであり、典型的な応用は省市連動メニューであり、市のプルダウンオプションはあなたがどの省を選んだかによって決定され、類似の需要は私たちがよく遭遇し、多くの初心者がこの問題に悩まされたことがあると信じています.
実は、連動メニューの実現原理はとても簡単で、本文は連動メニューの実現方式を詳しく紹介して、原理を知って、私達は簡単にXML、データベースからロードする無限級の連動メニューを作ることができます.
連動メニューの実現方法:
1.データフォーマットの決定:
まず、Optionを作成する構文について説明します.
Code:
var newOption = new Option(optionText, optionvalue);
上記の構文によれば、selectオプションはoptionTextとoptionvalueの2つの内容に分けられ、optionTextはドロップダウンボックスで表示されるオプションであり、optionvalueはコミットされた実際の値であることがわかります.たとえば、私たちが見たのは「北京」で、実際に提出された値は「010」です.
一貫性を保つために、オプションのフォーマットを次のように決定します.
Code:
{txt:[オプション名],val:[オプション値]}
オプション・グループは次のとおりです.
Code:

var childArr = [];
childArr['    1'] = [
    {txt:"   1", val:"   1"},
    {txt:"   2", val:"   2"},
    {txt:"   3", val:"   3"},
    ...
    {txt:"   n", val:"   n"}
]
childArr['     2'] = [
    {txt:"   1", val:"   1"},
    {txt:"   2", val:"   2"},
    {txt:"   3", val:"   3"},
    ...
    {txt:"   n", val:"   n"}
]

[親オプション値](Parent Options Value)は、親ドロップダウンリストで選択した値です.
注意:[]と{}の値は「,」(カンマ)で区切られていますが、最後の値の後ろには「,」(カンマ)は使用できません.そうしないと文法が間違っています.PHPプログラマーは特に注意してください.
2.入力された配列に基づいて、オプションのリストを作成します.
Code:

for (var i=0; i < len; i++)
{
    selectObj.options[i] = new Option(optionList[i].txt, optionList[i].val);
}

3.オプションを設定する前に、既存のオプションを空にする必要があります.
Code:

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;
    }
}

ここではselectObjではありませんoptions[i]ではなくselectObj.options[0]、options[0]を削除すると、後のオプションが追加されるので、selectObjだけが必要です.options[0] = null .
4.プロンプト選択項目とデフォルト選択項目を設定します.
通常、ドロップダウン・リストでは、「都市を選択してください」などのプロンプト選択項目を設定します.このオプションの値は空です.これは、ユーザーに選択操作を実行するように促すだけです.
また、ドロップダウンリストでは、デフォルトの選択項目、すなわちページのロード時に選択状態を設定できる項目も必要です.
完全なコードは次のとおりです.
javascript:

    
        
        
        <br>            function removeOptions(selectObj){<br>                if (typeof selectObj != 'object') {<br>                    selectObj = document.getElementById(selectObj);<br>                } //            <br>                var len = selectObj.options.length;<br>                for (var i = 0; i < len; i++) {<br>                    //                <br>                    selectObj.options[0] = null;<br>                }<br>            }<br>            /**   ：                   <br>			  *   ：Admin <br>			  * @param {String || Object]} selectObj             ，    <br>			  * @param {Array} optionList         ：[{txt:'   ', val:'010'}, <br>			  * {txt:'   ', val:'020'}] ，   <br>			  * @param {String} firstOption       ， ：“   ”，  ，    <br>			  * @param {String} selected      ，    <br>			**/  <br>            function setSelectOption(selectObj, optionList, firstOption, selected){<br>                if (typeof selectObj != 'object') {<br>                    selectObj = document.getElementById(selectObj);<br>                } //           <br>                removeOptions(selectObj); //           <br>                var start = 0; //                  <br>                if (firstOption) {<br>                    selectObj.options[0] = new Option(firstOption, ''); //       1             <br>                    start++;<br>                }<br>                var len = optionList.length;<br>                for (var i = 0; i < len; i++) {<br>                    //    option          <br>                    selectObj.options[start] = new Option(optionList[i].txt, optionList[i].val);<br>                    //              <br>                    if (selected == optionList[i].val) {<br>                        selectObj.options[start].selected = true;<br>                    }<br>                    //     1          <br>                    start++;<br>                }<br>            } //-->  <br>        
        <br>            var cityArr = [];<br>            cityArr['   '] = [{txt: '  ',val: '  '}, <br>								{txt: '  ',val: '  '}, <br>								{txt: '  ',val: '  '}, <br>								{txt: '  ',val: '  '}, <br>								{txt: '  ',val: '  '}, <br>								{txt: '  ',val: '  '}, <br>								{txt: '  ',val: '  '}, <br>								{txt: '  ',val: '  '}, <br>								{txt: '  ',val: '  '}];<br><br>			cityArr['   '] = [{txt: '  ',val: '  '}, <br>								{txt: '  ',val: '  '}, <br>								{txt: '  ',val: '  '}, <br>								{txt: '  ',val: '  '}];<br>            function setCity(province){<br>                setSelectOption('city', cityArr[province], '-   -');<br>            }<br>        
                    -   -                                      
		                          
                    -   -        
                                                
        
    
    
    

この構成により、データを設定することで、無限レベルの連動メニューを簡単に実現できます.あるいは、ファイルやデータベースにデータを保存し、Ajaxでデータを取得することもできます.