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());
    });
    */

  • 相关阅读:
    27 Spring Cloud Feign整合Hystrix实现容错处理
    26 Spring Cloud使用Hystrix实现容错处理
    25 Spring Cloud Hystrix缓存与合并请求
    24 Spring Cloud Hystrix资源隔离策略(线程、信号量)
    23 Spring Cloud Hystrix(熔断器)介绍及使用
    22 Spring Cloud Feign的自定义配置及使用
    21 Spring Cloud使用Feign调用服务接口
    20 Spring Cloud Ribbon配置详解
    19 Spring Cloud Ribbon自定义负载均衡策略
    18 Spring Cloud Ribbon负载均衡策略介绍
  • 原文地址:https://www.cnblogs.com/tlnshuju/p/6874798.html
Copyright © 2011-2022 走看看