easyUI下拉框默认选中和联动、内容回显

<td><input id="Area" name="Area"  type="text" style="width:125px;padding-left: 10px;" />
</td>

$(function() {//乡镇$("#Area").combobox({url : "${path }/geocodingRegion/getTownsAll",valueField:'id',textField:'name',panelHeight:"auto",mode : 'remote',editable:false,onSelect:function(n,o){   //当前选择if(o!=""&&n!=o){$("#Area").val(n.id);}}   onChange:function(n,o){   //当选项改变时触发if(o!=""&&n!=o){changeOrNot=1;}}});
});

-------------------------------------------------------联动------------------------------------------------------------------------------------

<tr><td class="title">所属区域</td><td><select id="ddlEArea" name="ddlEArea" class="easyui-combobox easyui-validatebox"  data-options="editable:false" style="width:180px;" required="required" >
<!--             <option value="-1">    请选择</option>-->         </select></td><td class="title">所属路段</td><td><select id="ddlESection" name="ddlESection" class="easyui-combobox easyui-validatebox" data-options="editable:false" style="width:180px;" required="required"></select></td>
</tr>

//辖区
$("#ddlEArea").combobox({url : '${path }/baseData/union?parNode=1880',valueField:'id',textField:'proName',panelHeight:'auto',mode : 'remote',onChange:function(n,o){if(o!=""&&n!=o){changeOrNot=1;}},onSelect: function(rec){$("#ddlESection").combobox('clear');$("#ddlESection").combobox('reload','${path }/baseData/union?parNode='+rec.id);}
});
//路段
$("#ddlESection").combobox({valueField:'id',textField:'proName',panelHeight:400,mode : 'remote',onChange:function(n,o){if(o!=""&&n!=o){changeOrNot=1;}},onSelect: function(rec){}});

--------------------------------------------自定义选项--------------------------------------

<td class="title">处罚状态:</td>
<td ><input type="text" name="penaltyStatus" id="illega-PenaltyStatus"></input></td>$('#illega-PenaltyStatus').combobox({valueField:'id',textField:'name',editable:false,value:'',width:130,panelHeight:'auto',data:[{id:'',name:'全部'},{id:'0',name:'未处罚'},{id:'1',name:'已罚款'}, {id:'2',name:'已警告'}]
});第二种后端查询的集合
<td><input id="lightType" name="lightType" placeholder="选择路灯类型" class="easyui-combobox" data-options="width:150" />
</td>
//路灯类型
$("#lightType").combobox({valueField:'id',textField:'proName',panelHeight:'auto',mode : 'remote',data:${baseDataList},  //后端查询的集合onChange:function(n,o){}
});
//获取值
var lightType = $("#lightType").combobox('getValue');

---------------------------------------默认选中和联动----------------------------

       //区域$("#areaId").combobox({url : "${path }/url",valueField:'id',textField:'name',panelHeight:'auto',mode : 'remote',onLoadSuccess:function(){var areaData = $("#areaId").combobox('getData');//获取所有下拉框数据//默认选中第一个$("#areaId").combobox('select',areaData[0].id);},onSelect:function(rec){$("#roadId").combobox('clear');$("#roadId").combobox('reload','${path}/url?regionId='+rec.id);}});

在EasyUI中combobox组件设置滚动条：

1.垂直滚动条：设置panelHeight属性，默认200，组件的数据过多滚动条自动出现，设置auto，则不出现滚动条。

2.水平滚动条：水平滚动条在组建中无法通过属性进行设置，但是可以通过样式进行控制。

给页面添加

.combobox-item{

white-space: nowrap;

}

此样式会修饰页面所有combobox组件，当某个数据过长时会出现水平滚动条。

-------------------------------------------内容回显----------------------------------------------

<input type="hidden" name="areaId"  style="width: 200px;" data-options="required:true" /><select id="areaId" name="areaId" style="width: 200px; " class="easyui-validatebox" data-options="required:true" value="${cityUnit.unitId}"><option value='${roadArrive.areaId}' selected="selected">${areaName}</option></select>$("#areaId").combobox({url:'${path }/geocodingRegion/getRegionAll?level=2',valueField:'id',textField:'name',editable:false,panelHeight:100,required:true,onSelect:function(node){$("#roadId").combobox({url:'${path }/geocodingRoad/getRoadAllByRegion?regionId='+node.id}).combobox('clear');}
});

easyUI下拉框默认选中和联动、内容回显相关推荐

easyui的combobox设置下拉框默认选中某一项
JSP页面:可以这样写,提供option的选项, <input class="easyui-combobox" name="customerStatus" ...
select下拉框默认选中selected属性不起作用的解决方法 ligerui
select下拉框默认选中selected属性不起作用浏览器-360浏览器系统-win10 框架-ligerui 原先代码: <td align="left" class ...
获取下拉框的文本和值，下拉框默认选中
js获取select标签选中的值,下拉框默认选中 <option value="${boj.xxx}" ${boj.xxx eq param.SELECT_NAME ? 's ...
jquery中如何获取select 下拉框默认选中的值？
通过id获取下拉框默认选中的值 <select class="form-control" id="numbers"><option value ...
html下拉框怎么默认选中,select获取下拉框的值下拉框默认选中方法
本文主要介绍select下拉框的相关方法. 1.通过id获取下拉框的value和文本值例如: 数字1 数字2 $("#numbers option:selected").val( ...
layui表单单选按钮和下拉框默认选中
单选按钮和下拉框默认选中在使用layui的单选按钮和下拉框时,有时候需要将后台传过来的值使得单选框和下拉菜单默认选中.我的方法是将后台穿过来的值先放在一个隐藏域中,然后再去取值. 1.HTML片 ...
angularjs的select 下拉框默认选中某个选项
angularjs的select 下拉框默认选中某个选项在网上找了很多链接,试验之后都不行.比如常见的: <select class="form-control" ng-m ...
php下拉默认选中的值,select下拉框默认选中
这次给大家带来select下拉框默认选中,select下拉框默认选中的注意事项有哪些,下面就是实战案例,一起来看一下. 本文主要介绍select下拉框的相关方法. 1.通过id获取下拉框的value和 ...
js怎么给下拉框默认选中
怎么给下拉框默认选中 <select id="shipping" name="node_type" class="valid"> ...

easyUI下拉框默认选中和联动、内容回显

easyUI下拉框默认选中和联动、内容回显相关推荐

最新文章

热门文章