为您推荐:
精华内容
最热下载
问答
展开全文
qq_38938763 2017-06-15 11:36:23
  • 53KB weixin_38528086 2020-10-23 10:16:17
  • 54KB weixin_38715019 2020-10-28 07:13:33
  • 5星
    141KB tmlx8 2017-11-09 14:49:41
  • jQuery实现二级联动下拉框

    项目需求,需要实现按照所选车队信息,对应司机下拉框中能够选择该车队下所有的司机信息。

    样式如下:

    <div id="takeform" title="物资提货" style="display:none;"><!-- 该Div的作用就是当点击jqGrid表格中的修改链接时弹出的dialog, 注意是在上面的Modify(id)函数中给下面的input赋值 --> 
    <form action="pickUpGoods_saveOrUpdatePickUpGoods.do" method="post" enctype="multipart/form-data">					
    <table class="exhibit_table">  				
    <tr>  
    		<td style="width:80px; padding:10px;" align="right"></td>  
    	        <td><input type="hidden" id="goodsId" name="goodsId" /></td>  
    	    </tr>
                <tr>  
    		<td style="width:80px; padding:10px;" align="right">合同号</td>  				
    <td><input type="text" id="contractNum" readonly="readonly" name="contractNum" /></td>  
    	    </tr>
    	    <tr>  
    		<td style="width:80px; padding:10px;" align="right">运输车队</td>
    		<!-- 运输车队下拉列表 -->
    		<td>
    		     <select id="Fleet" name="fleet" οnchange="getValue()" style="width:163px;">  <!--为车队下拉框绑定onchange事件,当用户改变车队选中内容时,触发onchange事件,从而获取并设置司机下拉框内容-->
    			<!--<option value ="0">--请选择--</option>
    			<option value ="2">车队2</option>
    			<option value="3">车队3</option>
    			<option value="4">车队4</option>
    			<option value="5">车队5</option>-->
    </select>
    		</td>
    	    </tr>
    	    <tr>  
    		<td style="width:80px; padding:10px;" align="right">司机</td>  
    		<!-- 运输车队下拉列表 -->
    		<td>
    		    <select id="Driver" name="driver" style="width:163px;">
    			<!--<option value ="volvo">司机一</option>
    			<option value ="saab">司机二</option>
    			<option value="opel">司机三</option>
    			<option value="audi">司机四</option>
    			<option value="audi2">司机五</option>
    		    --></select>
    		</td>  
    	    </tr> 									    
    	</table> 
        </form>
    </div>
    样式确定后,通过ajax向后台请求数据,将得到的车队信息动态加载到运输车队下拉框中,如下:

    /********取车队**********/
    		$.ajax({
    		    async:false,
    		    cache:true,
    	            type: "GET",  
    	            url: "fleet_findFleet.do", //获取json数据  
    	            success: function(result){
    			var result = eval('('+ result +')');
    			if(result != undefined && result.length > 0){
    	                    for ( var i = 0; i < result.length; i++) {
    				fleet_child={id:result[i].id, fleetName:result[i].fleetName};
    	                        var fleedValue = fleet_child.id;  
    	                        var fleedText = fleet_child.fleetName;  
    	                        var opt = "<option value='" + fleedValue + "'>" + fleedText + "</option>";  
    	                        $("#Fleet").append(opt);
    	                   } 
    	               }
                      },  
                      error: function() {  
                          alert("获取车队信息失败")  
                      }  
                  });
    由于车队信息是动态选取的,当用户没有选取车队时,直接点击司机下拉框时,此时司机下拉框是空,所以应该默认选取了某个车队信息,通过ajax向后台请求此车队下对应的司机信息,如下:

    /********取司机**********/
    		$.ajax({
    		    async:false,
    		    cache:true,
    		    url: "driver_findDriver.do?ownedFleet=1",//向后台发送请求时,默认参数为1,即请求所属车队为1下的所有司机信息
    		    type: 'GET',
    		    success: function(result){
    			//alert(result);
    			var result = eval('('+ result +')');
    			if(result != undefined && result.length > 0){
    			    var driver_child;
    			    for ( var i = 0; i < result.length; i++) {
    				driver_child = {id:result[i].id, driverName:result[i].driverName};
    				var driverValue = driver_child.id;  
    				var driverText = driver_child.driverName;  
    				var opt = "<option value='" + driverValue + "'>" + driverText + "</option>";  
    				$("#Driver").append(opt); 	 
    			    }
    			}
    		    },
    		    error:function(e){alert("获取司机信息失败");}
    		});


    默认车队信息、司机信息加载完后,需实现当用户选取某个车队时,此时司机下拉框中的信息即为此车队下所属司机的信息,如下:

    function getValue(){
    			$("#Driver").html("");
    			var obj = document.getElementById("Fleet");     //定位id
    			var index = obj.selectedIndex; 			// 选中索引
    			var fleetText = obj.options[index].text; 	// 选中文本
    			var fleetValue = obj.options[index].value; 	// 选中值
    			$.ajax({
    			    async:false,
    				cache:true,
    				data: {ownedFleet:fleetValue},		//向后台发送请求时,传递参数ownedFleet
    				url: "driver_findDriver.do",
    				type: 'POST',
    				success: function(result){
    					//alert(result);
    					var result = eval('('+ result +')');
    					if(result != undefined && result.length > 0){
    					    var driver_child;
    					    for ( var i = 0; i < result.length; i++) {
    						driver_child = {id:result[i].id, driverName:result[i].driverName};
    						var driverValue = driver_child.id;  
    					 	var driverText = driver_child.driverName;  
    						var opt = "<option value='" + driverValue + "'>" + driverText + "</option>";  
    						$("#Driver").append(opt); 	 
    					    }
    					}
    				},
    				error:function(e){alert("获取司机信息失败");}
    			});
    		    }





    展开全文
    u012724595 2017-08-08 19:12:14
  • 43KB weixin_38528517 2020-12-11 09:09:47
  • 47KB weixin_38743968 2020-12-02 00:30:47
  • 80KB weixin_38663973 2020-11-24 01:14:18
  • 4星
    2KB wanganlin21 2011-06-03 17:32:02
  • jQuery 1.3.2 简单实现select二级联动jQuery 二级联动$(document).ready(function(){$("#province").change(function(){$("#province option").each(function(i,o){if($(this).attr("selected")){$(".city").hide();...

    jQuery 1.3.2 简单实现select二级联动

    jQuery 二级联动

    $(document).ready(function(){

    $("#province").change(function(){

    $("#province option").each(function(i,o){

    if($(this).attr("selected"))

    {

    $(".city").hide();

    $(".city").eq(i).show();

    }

    });

    });

    $("#province").change();

    });

    ----请选择省份----

    北京

    上海

    江苏

    ----请选择城市----

    东城

    西城

    崇文

    宣武

    朝阳

    黄浦

    卢湾

    徐汇

    长宁

    静安

    南京

    镇江

    苏州

    南通

    扬州

    JQuery实现的二级联动菜单

    先看页面代码

    Html代码

    *短信类型:

    ==请选择类型==

    ${t.name}

    #list>

    其中id为first的下拉列表为第一个下拉列表,id为second的区域为第二个下拉列表。

    JavaScript代码:

    $(function(){

    $("#second").hide(); //初始化的时候第二个下拉列表隐藏

    $("#first").change(function(){ //当第一个下拉列表变动内容时第二个下拉列表将会显示

    var parentId=$("#first").val();

    if(null!= parentId && ""!=parentId){

    $.getJSON("http://localhost/msg/getSecondTypesJson",{id:parentId},function(myJSON){

    var options="";

    if(myJSON.length>0){

    options+="==请选择类型==";

    for(var i=0;i

    options+=""+myJSON[i].name+"";

    }

    $("#area").html(options);

    $("#second").show();

    }

    else if(myJSON.length<=0){

    $("#second").hide();

    }

    });

    }

    else{

    $("#second").hide();

    }

    });

    });

    展开全文
    weixin_34529812 2021-06-12 15:09:04
  • 393KB jokedo 2017-11-08 20:14:41
  • 35KB weixin_38720762 2020-11-26 23:55:40
  • 72KB hy983310 2021-03-18 21:25:56
  • 98KB evermrzhong 2019-05-29 17:02:45
  • XU906722 2018-02-12 14:30:19
  • weixin_32638607 2021-01-19 20:18:17
  • weixin_32068473 2021-04-02 08:10:30
  • weixin_39977136 2021-06-11 11:54:54
  • weixin_28911479 2021-01-27 02:41:02
  • weixin_39880621 2020-12-31 09:12:15
  • weixin_39630744 2020-12-22 12:16:42
  • 空空如也

    空空如也

    1 2 3 4 5 ... 20
    收藏数 1,099
    精华内容 439
    热门标签
    关键字:

    jquery二级联动下拉列表