JQueryは省市連動を実現

11892 ワード

先端

本文はJQ方式が省市連動を実現するために用いられる知識点を説明する:JQドキュメント操作方法

append()要素の後にコンテンツを追加

appendTo()指定された要素に要素を移動する

遍歴方式一:.each(配列、function(i,n))は、iが下付き、nが下付きに対応する配列[i]を表す値方式2である.e a c h(配列,f u n c t i o n(i,n))は、iが下付きである、nが下付きに対応する配列[i]を表す値方式2:(配列).each(function(j,m){});ここでjとmは、mの値を表示する必要がなければ書かなくてもよい.表示が必要なら書く必要があります.一・プロセス分析1-htmlページを作成する必要がある省と都市を含む:

    ：
              ：

2-2 D配列の配置都市を用意する必要があります

//                         ，      
            var cities = [
            ["   ","   ","   ","   ","   "],
            ["   ","   ","    ","   ","   "],
            ["   ","   ","   "],
            ["   ","   ","   "]
            ];

3-js導入cdn方式が必要

<script src="http://libs.baidu.com/jquery/1.3.2/jquery.min.js">script>

4-JSを2回書く.まず、省のオブジェクトと都市のオブジェクトを取得する必要があります.その中で、省のオブジェクトは変更時間を監視する必要があります.JSは元のものがonChange属性で、JQはonをすべて削除して方法になりました.

$("#provence").change(funciton(){ 
 });

これによりhtml対応のvalue下付き文字を取り出すことができ、2次元配列の下付き文字に対応することができる(これは意図的に設計された注意が必要である)

            $(function(){//    
                //          
            var $city = $("#city");
//                         ，      
            var cities = [
            ["   ","   ","   ","   ","   "],
            ["   ","   ","    ","   ","   "],
            ["   ","   ","   "],
            ["   ","   ","   "]
            ];
        //       

           $("#provence").change(function(){
            $city.get(0).length = 0;
            var val = this.value;
             $.each(cities, function(i,n) {
                if (val == i    ) {
                    $(n).each(function(j,m){
                        //    ，           
                        $city.append("+m+"")
                    });
                }
             });
           });

            });

二・総括
省市連動では主に配列や要素への追加を考察しているが、要素を追加する前に都市ノードの要素を先にクリアする必要がある点に注意しなければならない点がある.一つはJS原生方式を採用し、要素の長さを1にすることである(これは都市に「選択してください」というノードがあるためである.)方式2:JQオブジェクトのeachメソッドで値をすべて空にする.
三・すべてのコード


<html>
    <head>
        <meta charset="UTF-8">
        <title>title>
        <script src="http://libs.baidu.com/jquery/1.3.2/jquery.min.js">script>
        <script>
            $(function(){//    
                //          
            var $city = $("#city");
//                         ，      
            var cities = [
            ["   ","   ","   ","   ","   "],
            ["   ","   ","    ","   ","   "],
            ["   ","   ","   "],
            ["   ","   ","   "]
            ];
        //       

           $("#provence").change(function(){
            $city.get(0).length = 1; //   ：            1；

//          $city.each(function(i,n){        ，  i    0，          
//              alert(i);
//              n = null;
//          });
            var val = this.value;
             $.each(cities, function(i,n) {
                if (val == i    ) {
                    $(n).each(function(j,m){
                        //    ，           
                        $city.append("+m+"")
                    });
                }

             });
           });

            });

        script>

    head>
    <body>

        
          ：<select id="provence">
                    <option value="0" name="provence">   option>
                    <option value="1" name="provence">   option>
                    <option value="2" name="provence">   option>
                    <option value="3" name="provence">   option>
                select>
              ：<select id="city">
                    <option value="0" name="city">   option>
                select>
    body>
html>

方法2はなぜできないのか,まだ解決できない.

jqGrid中国語ドキュメント(9)-subGrid(サブデータテーブル)

CaptureとBubbleイベントフェーズ