jQuery implements multi-level linkage drop-down list query box

Home

Web Front-end

JS Tutorial

jQuery implements multi-level linkage drop-down list query box_jquery

May 16, 2016 pm 03:19 PM

jquery drop-down list Multi-level linkage Inquire

This article introduces the detailed code of jQuery to implement multi-level linkage drop-down list query box. It is shared with everyone for your reference. The specific content is as follows

Rendering:

Specific code:

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

Copy after login

I hope this article will be helpful to everyone learning jquery programming.

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn