純jsのN級連動リストボックス——jQueryに基づく

複数のリストボックスが連動しているのは、大きな問題ではありませんが、面倒です.では、できるだけ便利にするにはどうすればいいのでしょうか.ネットで検索してみたが、あまり使いやすいものは見つからず、自分で書いた.jQueryに基づいて、無限レベルの連動、ドロップダウンリストボックスとリストボックスをサポートします.
 
手順と使い方を先に説明します.
1、ページにリストボックスを設定する

  ：<select name="c5118020" id="ctrl_001" >
        <option value="-99999">   </option><option value="1">  </option><option value="2">  </option><option value="3">  </option><option value="4">  </option><option value="5">  </option>
    </select><br/>
      ：<select size="1" name="c5118030" id="ctrl_002">
        <option value="1">      </option>
    </select><br/>
      ：<select id="ctrl_003" name="c5118040" > 
        <option value="1">      </option>
    </select><br/>
      ：<select id="ctrl_004" name="c5118050" >
        <option value="1">      </option>
    </select>

レイアウトは自由に設定でき、id、name、cssなどは何の制限もありません.
 
2、引用js

<script language="javascript" type="text/javascript" src="nature.head.js"></script>
    <script language="javascript" type="text/javascript" src="jquery-1.8.2.min.js"></script>
    <script language="javascript" type="text/javascript" src="Nature.Control.Base.js"></script>
    <script language="javascript" type="text/javascript" src="Nature.Control.Base.UnionList.js"></script>

 
3、連動リストボックスの属性とイベントを設定する

var uLst;

       window.onload = function () {
           //        
           var lstEvent = {
               lstObjects: [$("#ctrl_001"), $("#ctrl_002"), $("#ctrl_003"), $("#ctrl_004")],     //       ，    
               ajaxPara: [{}, {}, {}, {}],      //  ajax   ，        ，          
               //    change  。
               //selectValue：       ，
               //lst：         ，
               //ajaxPara：             
               //callback：    ，      change  ，      lst.change();
               lstChange: function (selectValue, lst, ajaxPara, callback) {
                   //alert(selectValue);
                   //alert(lst);

                   /*     。            ajax   ，ajaxPara：             
                       ajax         ，            ，            callback
                   */
                   lst.append("<option value='" + selectValue + "_1'>" + selectValue + "_text1</option>");
                   lst.append("<option value='" + selectValue + "_2'>" + selectValue + "_text2</option>");
                   lst.append("<option value='" + selectValue + "_3'>" + selectValue + "_text3</option>");
                   lst.append("<option value='" + selectValue + "_4'>" + selectValue + "_text4</option>");

                   callback(lst);

               }
           };

           //                         
           var baseCtrl = new Nature.Controls.BaseControl({});
           //       
           uLst = baseCtrl.UnionList(lstEvent);

       };

 
lstEventプロパティの説明
lstObjects:配列形式、中にリストボックスを保存します.前後の順序に注意してください.第1級は第1位、第2級は第2位に置いてください.このように押します.順番を間違えてはいけない.
ajaxPara:ほとんどの連動はajaxでオプションを取得し、ajaxを使用するにはいくつかのパラメータが必要です.では、必要なパラメータをここに置いて、changeイベントで、対応するリストボックスのオプションに必要なパラメータを得ることができます.
lstChange:いずれかのリストボックスのオプションが変更されると、このイベントがトリガーされ、ここで次のリストボックスを埋め込むオプションが実現されます.ほとんどの取得オプションはajax非同期方式を使用するため、ajaxがオプションを取得した後、callback方式でコールバックすることができ、つまり次のリストボックスのchangeイベントをトリガーするコールバック関数が設定されています.
 
 =========================================
 
基本的な状況はこうです.次に、リストボックスのオプションを取得する方法について説明します.
 
リストボックスを取得するオプション(option,item)には多くの方法があり,レコードセットのフォーマットも千差万別であるため,連動リストボックス内部に集合することもできない.また,単一職責と低結合の原則に基づいて,より汎用的なニーズがあり,リストボックスのオプションを取得する機能を外部処理に置くべきである.
 
ページで直接オプションを取得するにはajaxを使ってもいいし、他の方法を使ってもいいです.この機能を内部実装していないため,偽データをシミュレートする簡単なプレゼンテーションを行った.前のリストボックスの選択値に基づいて、次のリストボックスのtextを設定します.これは比較的明らかな区別があると思います.
 
 
最後にオンラインプレゼンテーション
 

 

 

ps:

1、メリットとデメリット

利点は比較的汎用的で、少し便利である.欠点は、やはり面倒くさい.

やり終えてから、もう一度考え直しましたが、直接実現するより何が違うのでしょうか.大きな違いもないようですね、ははは.道理でネット上には有名な連動リストボックスがないわけだ.p>

 

2、改善すべき点

実は連動リストボックスの難点は、どのように連動するかではなく、デフォルトのオプションをどのように設定するかです.たとえば、レコードを変更するときに、フィールド値が瀋陽市、平和区、○○街、○○コミュニティであれば、リストボックスのデフォルトオプションを設定する必要があります.しかし、オプションは動的に生成され、ajaxが取得したもので、この問題は何日も考えていたが、今になってやっと明確な考え方ができた.何かいい方法はありませんか.