jQuery はマルチレベルリンケージドロップダウンリストクエリを実装します box

ホームページ

ウェブフロントエンド

jsチュートリアル

jQuery はマルチレベルリンケージドロップダウンリストクエリを実装します box_jquery

May 16, 2016 pm 03:19 PM

jquery ドロップダウンリスト多層連携お問い合わせ

この記事では、マルチレベルリンケージドロップダウンリストクエリボックスを実装するための jQuery の詳細なコードを紹介し、具体的な内容は次のとおりです。

レンダリング:

特定のコード:

&lt;html&gt;
&lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312" /&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;meta name="keywords" content=" keywords" /&gt;
  &lt;meta name="description" content="description" /&gt;
&lt;/head&gt;
&lt;script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"&gt;
&lt;/script&gt;
&lt;style type="text/css"&gt;
  body{font-size:13px}
  .clsInit{width:435px;height::35px;line-height:35px;padding-left:10px}
  .clsTip{padding-top:5px;background-color:#eee;display:none}
  .btn{border:solid 1px #666;padding:2px;width:65px;float:right;margin-top:6px;margin-right:6px;filter:progid:DXImageTransform.Mcrosoft.Gradient(GraientType=0,StartColorStr=#FFFFFF,EndColorStr=#ECE9D8);}
&lt;/style&gt;
&lt;body&gt;
&lt;script type="text/javascript"&gt;
  $(function(){
    function objInit(obj){
      return $(obj).html('&lt;option&gt;请选择&lt;/option&gt;');
    }
    var arrData={
      厂商1:
      {
        品牌一:'型号1-1-1,型号1-1-2',
        品牌二:'型号1-2-1,型号1-2-2'
      },
      厂商2:
      {
        品牌一:'型号2-1-1,型号2-1-2',
        品牌二:'型号2-2-1,型号2-2-2'},
      厂商3:
      {
        品牌一:'型号3-1-1,型号3-1-2',
        品牌二:'型号3-2-1,型号3-2-2'
      }
    };
    $.each(arrData,function(pF){
      $('#selF').append('&lt;option&gt;'+pF+'&lt;/option&gt;');
    });
    $('#selF').change(function(){
      objInit('#selT');
      objInit('#selC');
      $.each(arrData,function(pF,pS){
        if($('#selF option:selected').text()==pF){
          $.each(pS,function(pT,pC){
            $('#selT').append('&lt;option&gt;'+pT+'&lt;/option&gt;');
          });
          $('#selT').change(function(){
            objInit('#selC');
            $.each(pS,function(pT,pC){
              if($('#selT option:selected').text()==pT){
                $.each(pC.split(","),function(){
                  $('#selC').append('&lt;option&gt;'+this+'&lt;/option&gt;');
                })
              }
            })
            
          });
        }
      })
    });
  });
&lt;/script&gt;

&lt;div class="clsInit"&gt;

  厂商：&lt;select id="selF"&gt;&lt;option&gt;请选择&lt;/option&gt;&lt;/select&gt;
  品牌：&lt;select id="selT"&gt;&lt;option&gt;请选择&lt;/option&gt;&lt;/select&gt;
  型号：&lt;select id="selC"&gt;&lt;option&gt;请选择&lt;/option&gt;&lt;/select&gt;
  &lt;input type="button" value="查询" id="Button1" class="btn" /&gt;
&lt;/div&gt;
&lt;div class="clsInit" id="divTip"&gt;&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;

ログイン後にコピー

この記事が jquery プログラミングを学習するすべての人に役立つことを願っています。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。