编程 Javascript

jQuery实现联动下拉列表查询框

Posted in Javascript onJanuary 04, 2017

在查询与列表显示的时候经常用到联动列表显示，比如一级选项是国家，二级选项是省，三级是市，这样的联动是联系的实时导出的，比如你不可能选择了四川省却在三级联动栏中出现济南市，这样的联动实现方法如下：

效果图示：

jQuery实现联动下拉列表查询框

实现源代码：

<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title></title>
 <meta name="keywords" content=" keywords" />
 <meta name="description" content="description" />
</head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css">
 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);}
</style>
<body>
<script type="text/javascript">
 $(function(){
  function objInit(obj){
   return $(obj).html('<option>请选择</option>');
  }
  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('<option>'+pF+'</option>');
  });
  $('#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('<option>'+pT+'</option>');
     });
     $('#selT').change(function(){
      objInit('#selC');
      $.each(pS,function(pT,pC){
       if($('#selT option:selected').text()==pT){
        $.each(pC.split(","),function(){
         $('#selC').append('<option>'+this+'</option>');
        })
       }
      })
      
     });
    }
   })
  });
 });
</script>

<div class="clsInit">

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

</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

jQuery实现联动下拉列表查询框

- Author -

小伍

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript 带有滚动条的表格,标题固定,带排序功能.

Nov 13 Javascript

防止页面被iframe(兼容IE,Firefox火狐)

Jul 04 Javascript

jQuery 属性选择器element[herf*='value']使用示例

Oct 20 Javascript

zTree插件之单选下拉菜单实例代码

Nov 07 Javascript

了解Javascript的模块化开发

Mar 02 Javascript

jQuery中$(function() {});问题详解

Aug 10 Javascript

JSON字符串和对象相互转换实例分析

Jun 16 Javascript

vue中for循环更改数据的实例代码(数据变化但页面数据未变）

Sep 15 Javascript

微信小程序授权获取用户详细信息openid的实例详解

Sep 20 Javascript

JS实现手写parseInt的方法示例

Sep 24 Javascript

简单理解Vue中的nextTick方法

Jan 30 Javascript

微信小程序复选框实现多选一功能过程解析

Feb 14 Javascript

JavaScript中String对象的方法介绍

Jan 04 #Javascript

js select下拉联动更具级联性!

Apr 17 #Javascript

基于JavaScript实现熔岩灯效果导航菜单

Jan 04 #Javascript

使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)

Jan 04 #Javascript

jquery+ajax实现省市区三级联动效果简单示例

Jan 04 #Javascript

基于jQuery实现火焰灯效果导航菜单

Jan 04 #Javascript

深入理解Javascript中的valueOf与toString

Jan 04 #Javascript