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方法将 ...
随机推荐
- android中的开机自启动
android中的开机自启动 android中的开机自启动可分为两步: 1.写一个BroadcastReceiver: public class BootReceiver extends Broadc ...
- linux-后台运行程序-nohup
语法格式: nohup 命令 & (日志输出到当前目录nohup.out) nohup 命令 & >> 文件 (日志 ...
- 如何快速搜索SQL数据库数据和对象
原文 如何快速搜索SQL数据库数据和对象 Frequently, developers and DBAs need to search databases for objects or data. I ...
- ServicePointManager.ServerCertificateValidationCallback 冲突的解决
ServicePointManager是用于创建. 维护和删除的实例的静态类ServicePoint类. 当应用程序请求对 Internet 资源统一资源标识符 (URI) 的连接通过ServiceP ...
- docker运行mysql
http://blog.csdn.net/u011492260/article/details/77970445 第一步: 安装Docker:首先到docker官网下载适合自己电脑当前系统的版本,并安 ...
- http://www.360doc.com/content/14/0313/17/16070877_360315087.shtml
http://www.360doc.com/content/14/0313/17/16070877_360315087.shtml
- 2017.9.15 mybatis批量插入后实现主键回填
参考来自:mybatis mysql 批量insert 返回主键 注意:必须要在mybatis3.3.1及其以上才能实现. 1.service List branchEntryList = (Arra ...
- HTML5 Canvas 龟羊赛跑
从一张图上截取不同图块,动态显示在canvas上,形成赛跑的效果.完整代码图片下载请点击 https://files.cnblogs.com/files/xiandedanteng/turtleShe ...
- VirtualBox修改现有虚拟磁盘大小
VirtualBox装Ubuntu下载Android源代码分配的磁盘空间不够,修改磁盘大小必须进入VirtualBox安装目录使用VBoxmanager修改,执行: vboxmange modifyh ...
- SQL 关键字 'USER' 附近有语法错误怎么办
如下图所示,我想要访问我的Database1.mdf的user这张表,提示如下错误 user在SQL Server中是系统保留字,将user修改为[user]就可以了.但是直接在VS中是无法修改的 ...