EasyUI Combobox 组合框（select + input）

最新推荐文章于 2020-11-29 16:25:39 发布

琛赂

最新推荐文章于 2020-11-29 16:25:39 发布

阅读量908

点赞数

CC 4.0 BY-SA版权

分类专栏： Easyui

本文链接：https://blog.csdn.net/sinat_27220357/article/details/104198013

Easyui 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用EasyUI框架实现下拉框的联动效果。通过onSelect事件，当选择一个选项时，可以自动填充另一个输入框的值。示例展示了在JSP页面中如何设置下拉框和对应的文本框，以及如何使用Java代码遍历选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官网介绍

需要实现下拉框的联动效果
使用onSelect事件，
注意： class属性必须为easyui-combobox
说明 onSelect的function中，参数rec为该（select）标签对象，可以通过rec.id、rec.text、rec.value等获取对应的信息

<th style="width: 10%">申报计量单位</th>
<td style="width: 20%">
	<select id="ivdDclUnitcd" class="easyui-combobox" name="ivdDclUnitcd" data-options="
	    onSelect: function(rec){
	    $('#ivdDclUnitNm').val(rec.text);
	    }">
		<option value="">-- 请选择 --</option>
		<option value="1">箱</option>
		<option value="2">包</option>
		<option value="3">千米</option>
	</select>
	<input type="text" class="srk" name="ivdDclUnitNm" id="ivdDclUnitNm" value="" />
</td>

工作中用到的，以jsp为例：

<th style="width: 10%">申报计量单位</th>
<td style="width: 20%">
	<select id="ivdDclUnitcd" class="easyui-combobox" name="ivdDclUnitcd" data-options="
	    onSelect: function(rec){
	    $('#ivdDclUnitNm').val(rec.text);
	    }">
		<option value="">-- 请选择 --</option>
		<c:forEach var="dclUnit" items="${dclUnitList}" >
			<option value="${dclUnit.scdCode}" <c:if test="${ivdDetail.ivdDclUnitcd eq dclUnit.scdCode}" >selected</c:if> >${dclUnit.scdDesc}</option>
		</c:forEach>
	</select>
	<input type="text" class="srk" name="ivdDclUnitNm" id="ivdDclUnitNm" value="<c:out value='${ivdDetail.ivdDclUnitNm}' />" />
	<%-- <input type="text" class="srk" name="ivdDclUnitcd" id="ivdDclUnitcd" value="<c:out value='${ivdDetail.ivdDclUnitcd}' />" /> --%>
</td>