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

easyui combobox 三级级联 input 两种实现的更多相关文章

  1. 使用easyui combobox初始化+在input中触发下拉框+获取值

    效果图: 1.html <input id="alarmLeve" class="easyui-combobox" name="alarmLev ...

  2. 学习日记10、easyui编辑器combobox绑定数据的两种方式

    1.数据本地绑定 var card = [{ "value": "正常", "text": "正常" }, { &quo ...

  3. input两种默认显示文字方式

    First Note: placeholder属性 规定帮助用户填写输入字段的提示,值不会被提交, 且该提示会在输入字段为空时显示,并会在字段获得焦点时消失. 如 <input type=&qu ...

  4. Jquery EasyUI修改行背景的两种方式

    1.数据加载完成不请求后台的做法 方式一: //更改表格行背景 function changeLineStyle(index){ var rows=$("#alertGird"). ...

  5. easyui combobox级联(转载)

    一.创建combobox 有如下几种方式可以创建一个combobox 1.使用select标签,并加上class="easyui-combobox",这种方式比较适用于静态的选项. ...

  6. 把JSON数据载入到页面表单的两种思路(对easyui自带方法进行改进)

    #把JSON数据载入到页面表单的两种思路(对easyui自带方法进行改进) ##背景 项目中经常需要把JSON数据填充到页面表单,一开始我使用easyui自带的form load方法,觉得效率很低,经 ...

  7. easyUI的combobox实现级联

    先简介下combobox: easyUI重写了select,取而代之的是combobox,有例如以下几种方式能够创建一个combobox 1.使用select标签,并加上class="eas ...

  8. easyui里弹窗的两种表现形式

    easyui里弹窗的两种表现形式 博客分类: jQueryEasyUi   1.主JSP页面中描绘弹窗   <div id="centerDiv" data-options= ...

  9. 用easyui实现查询条件的后端传递并自动刷新表格的两种方法

    用easyui实现查询条件的后端传递并自动刷新表格的两种方法 搜索框如下: 通过datagrid的load方法直接传递参数并自动刷新表格 通过ajax的post函数传递参数并通过loadData方法将 ...

随机推荐

  1. iptables实现IP地址重定向(转发)

    iptables不单只防火墙这么简单,NAT转发这些都很强大.但是市面上iptables的教程基本都是围绕着CentOS 6来展开的,而对于CentOS 7和Ubuntu又不一样的写法,尤其是Ubun ...

  2. 细说JavaScript对象(2):原型对象

    JavaScript 并没有类继承模型,而是使用原型对象 prototype 进行原型式继承. 尽管人们经常将此看做是 JavaScript 的一个缺点,然而事实上,原型式继承比传统的类继承模型要更加 ...

  3. linux stdin(0)/ stdout(1) / stderr(2)

    在shell中,每个进程都和三个系统文件相关联:标准输入stdin,标准输出stdout.标准错误stderr,三个系统文件的文件描述符分别为0,1.2.进程需要的输入来自stdin文件.进程的标准输 ...

  4. 如何给JQ的ajax方法中的success()传入参数?

    当时在使用JQuery提供的Ajax技术的时候,我有个需求,就是要给它请求成功后调用的success()方法传入参数: 所以,我就直接这样子写了: <script> function ge ...

  5. mysql优化30条建议

    1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索 ...

  6. Web项目中用mybatis配置多个数据库

    需要在项目中配置多个数据库(比如一个mysql,一个oracle)的时候,可按照如下方式配置 首先是第一个数据库的配置 <bean name="transactionManager&q ...

  7. Solidworks 好的测试题模拟题

    题目:按照下图构建草图,注意设置必要的几何约束. 问题:   1.参照下图所示参数时请问其中绿色区域的面积为多少平方毫米?     题目:参照下图绘制草图轮廓,注意图中各线条之间均为相切过渡. 问题: ...

  8. Python学习笔记(二)网络编程的简单示例

    Python中的网络编程比C语言中要简洁很多,毕竟封装了大量的细节. 所以这里不再介绍网络编程的基本知识.而且我认为,从Python学习网络编程不是一个明智的选择.   简单的TCP连接 服务器代码如 ...

  9. bzoj2115【WC2001】Xor

    2115: [Wc2011] Xor Time Limit: 10 Sec  Memory Limit: 259 MB Submit: 2059  Solved: 856 [Submit][Statu ...

  10. P-Called-Party-ID 头域的应用说明

    P-Called-Party-ID 头域的适用场景 P-Called-Party-ID 适用于 UAS 须要知道在代理将目标改写为Contact 地址之前请求中Request-URI的目的AOR的情况 ...