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());
});
*/
easyui combobox 三级级联 input 两种实现的更多相关文章
- 使用easyui combobox初始化+在input中触发下拉框+获取值
效果图: 1.html <input id="alarmLeve" class="easyui-combobox" name="alarmLev ...
- 学习日记10、easyui编辑器combobox绑定数据的两种方式
1.数据本地绑定 var card = [{ "value": "正常", "text": "正常" }, { &quo ...
- input两种默认显示文字方式
First Note: placeholder属性 规定帮助用户填写输入字段的提示,值不会被提交, 且该提示会在输入字段为空时显示,并会在字段获得焦点时消失. 如 <input type=&qu ...
- Jquery EasyUI修改行背景的两种方式
1.数据加载完成不请求后台的做法 方式一: //更改表格行背景 function changeLineStyle(index){ var rows=$("#alertGird"). ...
- easyui combobox级联(转载)
一.创建combobox 有如下几种方式可以创建一个combobox 1.使用select标签,并加上class="easyui-combobox",这种方式比较适用于静态的选项. ...
- 把JSON数据载入到页面表单的两种思路(对easyui自带方法进行改进)
#把JSON数据载入到页面表单的两种思路(对easyui自带方法进行改进) ##背景 项目中经常需要把JSON数据填充到页面表单,一开始我使用easyui自带的form load方法,觉得效率很低,经 ...
- easyUI的combobox实现级联
先简介下combobox: easyUI重写了select,取而代之的是combobox,有例如以下几种方式能够创建一个combobox 1.使用select标签,并加上class="eas ...
- easyui里弹窗的两种表现形式
easyui里弹窗的两种表现形式 博客分类: jQueryEasyUi 1.主JSP页面中描绘弹窗 <div id="centerDiv" data-options= ...
- 用easyui实现查询条件的后端传递并自动刷新表格的两种方法
用easyui实现查询条件的后端传递并自动刷新表格的两种方法 搜索框如下: 通过datagrid的load方法直接传递参数并自动刷新表格 通过ajax的post函数传递参数并通过loadData方法将 ...
随机推荐
- phpredis Floating point exception
发生在高版本的gcc编译后的so用于低版本gcc编译出来的php, 解决方法, 加上参数-Wl,--hash-style=sysv phpize ./configure vi Makefile CC ...
- ArcMAP定义投影坐标
WGS84形式的高斯克吕格投影在ArcGIS系统中是不存在的,需要自己去定义.下面为MARK的定义过程.
- DefaultHttpRequestRetryHandler有重试3次的机制啊 为什么要重写?
DefaultHttpRequestRetryHandler有重试3次的机制啊 为什么要重写?
- easyui 放大镜图标
iconCls:search 对应的 easyui的查询图标忒丑 想用放大镜图标 iconCls:zoom 找半天找到放大镜图标的 然后去icon.css文件中查 发现这个样式就叫zoom.
- S5PV210使用的启动方式
2017年12月25日1. S5PV210存储配置: +内置64KB NorFlash(上电不需要初始化)(叫IROM 内部外存):用于存储预先设置的BL0; + SoC内置96KB SRAM(上电不 ...
- wp8使用mvvm模式简单例子
mvvm是silverlight/wpf下的mvc升华 通过一个简单的加法计算器例子来说明mvvm是什么 在设计界面完成设计之后,显示简单的布局,如下图: 然后来比较,传统的直接方式,mvc和mvvm ...
- EffectiveJava(5)避免创建不必要的对象
避免创建不必要的对象 1.通过延迟初始化对象提高性能 调用功能方法时调用静态工厂方法,而不是调用类时使用 2.适配器:把功能委托给一个后备对象,从而为后备对象提供一个接口的对象 3.自动装箱:优先使用 ...
- S2:外观模式 Facade
为子系统中的一组接口提供一个一致的界面,此模式定义了一个高层接口,这个接口使得这一子系统更加容易使用. 什么时候使用:1,开发阶段,子系统越来越复杂,增加外观模式提供一个简单的调用接口.2,维护一个大 ...
- Mysql的建表规范与注意事项
一. 表设计规范 库名.表名.字段名必须使用小写字母,“_”分割. 库名.表名.字段名必须不超过12个字符. 库名.表名.字段名见名知意,建议使用名词而不是动词. 建议使用InnoDB存储引擎. 存储 ...
- beyond compare 软件学习
beyond compare 软件可以实现基本的文件对比,这点和 NotePad++ 的功能一样.但是在实现文件夹与文件夹之间的对比的话,就要使用 beyond compare 进行对比,效率是成倍提 ...