/**<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. 【转载】uboot的工具mkimage使用方法

    uboot源代码的tools/目录下有mkimage工具,这个工具可以用来制作不压缩或者压缩的多种可启动映象文件. mkimage在制作映象文件的时候,是在原来的可执行映象文件的前面加上一个0x40字 ...

  2. 【SVN】删除SVN上的历史资源路径和SVN上的历史用户信息

    1.删除svn上历史资源路径 window--show view--other--svn资源库 可以右键选择删除 . ----------------------------------------- ...

  3. Ubuntu下eclipse不能新建java项目 java project的解决办法

    在ubuntu系统中,装了eclipse,打开过,后来装了JDK,却不能新建java项目.重装了几遍eclipse也没有用. 原因分析: 之所以新建找不到java项目是因为eclipse有残留文件导致 ...

  4. vi中使用“/”查找字符

    在vi 文件中使用"/"查找字符串 命令模式下,输入 /word 后回车,即查找word,按 n 查找下一个匹配单词,按 N 查找上一个匹配单词.

  5. ElasticSearch 专业术语

    1.Analysis(分析) 分析的过程就是将全文(full text)转换成 术语/分词(terms). 这取决于使用那个分析器,这些短语:“FOO BAR”, “Foo-Bar”, “foo,ba ...

  6. Solidworks如何在装配图中保存单独的一个零件

    如下图所示,我想要保存装配体的一个单独的零部件   选中该零件后点击编辑零部件   然后点击顶部的文件-另存为,弹出"解决模糊情形"对话框,询问你要保存装配体还是零部件   点击确 ...

  7. Architects Must Be Hands On

     Architects Must Be Hands On John Davies A good ARCHiTECT SHould lEAd By ExAMplE. He (or she) shoul ...

  8. bios文字解释

    很多笔记本电脑用户由于不熟悉bios,导致在需要设置bios时不知如何下手,其实bios基本大同小异,熟悉了以后再遇到bios设置就手到擒来了. 今天我们以笔记本电脑为例,进行bios界面的解读. 1 ...

  9. 固态硬盘(SSD) 和机 械硬盘(HDD) 优缺点比較

    Attribute SSD (Solid State Drive) HDD (Hard Disk Drive) Power Draw / Battery Life (功耗/电池寿命) Less pow ...

  10. 最常用的几个python库--学习引导

    核心库 1.NumPy 当我们用python来处理科学计算任务时,不可避免的要用到来自SciPy  Stack的帮助.SciPy Stack是一个专为python中科学计算而设计的软件包,注意不要将它 ...