zoukankan      html  css  js  c++  java
  • easyui combobox 三级级联 input 两种实现

    /**<img src='${pageContext.request.contextPath}/images/block.png'/>
     * @param 默认载入 省市
     */
    $(function(){
    	$("input[id^='area_']").css({"height":"39px","width":"250px"});
    	var city = "",district = "";
    	 $('#area_province').combobox({
    		valueField:'id',
    		textField:'name',
    		editable:false,
    		url:postPath+"/bisProvince/getBisProvinces",
    		method:"get",
    		formatter:function(row){
    			return "<img class='item-img' src='"+postPath+"/images/block.png'/> <span class='item-text'>"+row.name+"</span>";
    		},
    		onLoadSuccess:function(){
    			/*if($("#provinceId").val() != null){
    				$(this).combobox("select",$("#provinceId").val());
    			}*/
    		},
    		onChange:function(provinceId, oldValue){
    			$.get(postPath+"/bisCity/getBisCitys/"+provinceId,function(data){
    				city.combobox("clear").combobox('loadData',data);
    				district.combobox("clear");
    			},'json');
    		}
    	});
    	
    	city = $('#area_city').combobox({
    		valueField:'id',
    		textField:'name',
    		editable:false,
    		panelHeight:"auto",
    		formatter:function(row){
    			return "<img class='item-img' src='"+postPath+"/images/block.png'/> <span class='item-text'>"+row.name+"</span>";
    		},
    		onLoadSuccess:function(){
    			/*if($("#cityId").val() != null){
    				$(this).combobox("select",$("#cityId").val());
    			}*/
    		},
    		onChange:function(cityId, oldValue){
    			$.get(postPath+"/bisDistrict/getBisDistricts/"+cityId,function(data){
    				district.combobox("clear").combobox('loadData',data);
    			},'json');
    		}
    	});
    	
    	district = $('#area_district').combobox({
    		valueField:'id',
    		textField:'name',
    		editable:false,
    		panelHeight:"auto",
    		formatter:function(row){
    			return "<img class='item-img' src='"+postPath+"/images/block.png'/> <span class='item-text'>"+row.name+"</span>";
    		},
    		onLoadSuccess:function(){
    			/*if($("#districtId").val() != null){
    				$(this).combobox("select",$("#districtId").val());
    			}*/
    		},
    	});
    });
    /*$(function(){
    	$.get(postPath+"/bisProvince/getBisProvinces",function(datas){
    		var option = "<option value=' '>-- 请选择 --</option>";
    		$.each(datas, function(i) {
    			if($("#provinceId").val() == datas[i].id){
    				option += "<option value='"+datas[i].id+"' selected>"+datas[i].name+"</option>";
    			}else{
    				option += "<option value='"+datas[i].id+"'>"+datas[i].name+"</option>";
    			}
    		});
    		$("#province").html(option);
    	});
    	if($("#cityId").val() != null && $("#cityId").val() != ""){
    		loadCity($("#provinceId").val());
    	}
    });
    
    *//**
     * @param 载入城市
     * @param provinceId 省市 ID
     *//*
    function loadCity(provinceId){
    	$("#provinceId").val(provinceId);
    	$.get(postPath+"/bisCity/getBisCitys/"+provinceId,function(datas){
    		var option = "<option value=' '>-- 请选择 --</option>";
    		$.each(datas, function(i) {
    			if($("#cityId").val() == datas[i].id){
    				option += "<option value='"+datas[i].id+"' selected>"+datas[i].name+"</option>";
    			}else{
    				option += "<option value='"+datas[i].id+"'>"+datas[i].name+"</option>";
    			}
    		});
    		$("#city").html(option);
    	});
    	if($("#districtId").val() != null && $("#districtId").val() != ""){
    		loadDistrict($("#cityId").val());
    	}
    }
    
    *//**
     * @param 载入区域 
     * @param cityId 城市 ID 
     *//*
    function loadDistrict(cityId){
    	$("#cityId").val(cityId);
    	$.get(postPath+"/bisDistrict/getBisDistricts/"+cityId,function(datas){
    		if(datas != null && datas != ""){
    			var option = "<option value=' '>-- 请选择 --</option>";
    			$.each(datas, function(i) {
    				if($("#districtId").val() == datas[i].id){
    					option += "<option value='"+datas[i].id+"' selected>"+datas[i].name+"</option>";
    				}else{
    					option += "<option value='"+datas[i].id+"'>"+datas[i].name+"</option>";
    				}
    			});
    			$("#district").html(option);
    		}
    	});
    }
    
    $("#district").change(function(){
    	$("#districtId").val($("#district").val());
    });
    
    $("#city").change(function(){
    	//$("#cityId").val($("#city").val());
    	loadDistrict($("#city").val());
    });
    
    $("#province").change(function(){
    	$("#cityId").val("");
    	$("#district").empty();
    	loadCity($("#province").val());
    });
    */

  • 相关阅读:
    如何卸载VS 2017之前版本比如VS 2013、VS2015、 VS vNext?
    在SQL Server中如何进行UPDATE TOP .....ORDER BY?
    EntityFramework 6.x和EntityFramework Core插入数据探讨
    2017-2018:时间戳
    http协议进阶(六)代理
    认清性能问题
    <转>安全测试思维导图
    RESTful API浅谈
    http协议进阶(五)连接管理
    聊聊软件测试的职业规划
  • 原文地址:https://www.cnblogs.com/tlnshuju/p/6874798.html
Copyright © 2011-2022 走看看