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方法将 ...
随机推荐
- Linux下查看某个进程的网络带宽占用情况
说明: 1.可能查看某个进程的带宽占用需要明确知道PID.进程名字.发送速度.接收速度. 2.很遗憾,在Linux原生的软件中没有这样的一款,只能额外装,最符合以上的情况就只有nethogs. 3.n ...
- Orchard FAQ
Orchard学习视频已登录百度传课: http://www.chuanke.com/3027295-124882.html 问:Orchard用VS重新生成后为什么那么大? 答:因为每个模块的bin ...
- SQL Server Profiler和数据库引擎优化顾问
原文:SQL Server Profiler和数据库引擎优化顾问 简介 说到Sql的[性能工具]真是强大,SQL Server Profiler的中文意思是SQL Server事件探查,这个到底 ...
- 在eclipse上部署openfire 3.9.1源码,並配置openfire
参考文章:https://my.oschina.net/u/1409622/blog/205603 在网上找了很久部署openfire源码的文章,由于我使用的是最新的3.9.1源码,试了很多种部署方法 ...
- 【Linux】CentOS7上的一些操作小方法
1.在文件夹目录下删除文件 点击文件,按Delete键删除,就可以把文件删除到回收站中. 2.更改命令窗口的样式 打开命令窗口--->右键---->配置文件---->配置文件首选项
- 在c++代码中执行bat文件 【转】
我想在c++代码中执行磁盘上的一个bat文件. 这个bat文件的完整路径是:E:\\7z\\my7z.bat. 方法一: system("E:\\7z\\my7z.bat"); s ...
- ElasticSearch 专业术语
1.Analysis(分析) 分析的过程就是将全文(full text)转换成 术语/分词(terms). 这取决于使用那个分析器,这些短语:“FOO BAR”, “Foo-Bar”, “foo,ba ...
- ElasticSearch搜索
1.搜索---最基本的工具 我们可以将一个 JSON 文档扔到 Elasticsearch 里,然后根据 ID 检索.但 Elasticsearch 真正强大之处在于可以从无规律的数据中找出有意义的信 ...
- shell中set命令
set命令作用主要是显示系统中已经存在的shell变量,以及设置shell变量的新变量值.set命令不能够定义新的shell变量.如果要定义新的变量,可以使用declare命令以变量名=值的格式进行定 ...
- Linux IO模式及 select、poll、epoll详解(转)
同步IO和异步IO,阻塞IO和非阻塞IO分别是什么,到底有什么区别?不同的人在不同的上下文下给出的答案是不同的.所以先限定一下本文的上下文. 本文讨论的背景是Linux环境下的network IO. ...