select,radio 回显不推荐使用jquery初始化

本文探讨了在JSP页面中实现表单回显的最佳做法,对比了使用jQuery与直接在JSP页面中通过逻辑判断的方式,后者被认为更为推荐。

select,radio 表单回显避免使用jquery载入赋值

注意事项:

<html>
 <body>
<form method="post" action="">
		<!-- 如果表单中使用重置功能时,不推荐使用如下代码 -->
		<input type="radio" name="visible" value="1" />显示<br>
		<input type="radio" name="visible" value="0" />隐藏<br>
		<select name="orderBy" id="orderBy">
		   <option value="0">0</option>
		   <option value="1">1</option>
		</select><br>
		<input type="reset">
	</form>
 </body>
</html>
不推荐:使用如下js代码

<script type="text/javascript">
<!--
	$(function(){
	//回显时并不是真是数据的默认值
		$("input[type=radio][name=visible]").each(function() {
			if ($(this).val() == '${teacher.visible}') {
				$(this).attr("checked", "checked");
			}
		});
		$("#orderBy option").each(function() {
			if ($(this).val() == '${teacher.orderBy}') {
				$(this).attr("selected", "selected");
			}
		});
	});
//-->
</script>

最好的做法是:在jsp页面进行逻辑判断

<!-- 推荐使用如下代码 -->
<input type="radio" name="visible" value="1" <c:if test="${teacher.visible==1}">checked="checked"</c:if>/>显示<br>
<input type="radio" name="visible" value="0" <c:if test="${teacher.visible==0}">checked="checked"</c:if>/>隐藏<br>


<think>我们正在讨论如何使用jQuery实现select元素的数据。根据引用资料,有几种方法可以实现: 1. 通过设置val()并触发change事件(引用[4]) 2. 通过循环选项并设置selected属性(引用[2]) 3. 使用select2插件时的(引用[3]) 用户问题:请问jQuery select元素如何实现? 我们将提供几种常见方法,并给出示例代码。 方法1:使用val()方法(适用于普通select) - 如果select是单选框,可以直接使用val()设置值,然后触发change事件。 - 示例代码: $('#selectId').val('要选中的值').trigger('change'); 方法2:设置selected属性(适用于普通select,特别是多选时) - 循环所有option,判断值是否匹配,然后设置selected属性。 - 示例代码(单选框): var valueToSelect = '目标值'; $('#selectId option').each(function() { if ($(this).val() == valueToSelect) { $(this).prop('selected', true); } }); - 对于多选框,可以传入数组: $('#selectId').val(['值1', '值2']).trigger('change'); 方法3:使用select2插件(需要引入select2) - 对于单选框,同样使用val()和trigger('change')。 - 对于多选框,需要传入数组,并触发change。 - 另外,在动态添加option并时,可能需要先清空再添加,然后触发change(如引用[3]中的方法)。 注意:使用select2时,如果后下拉框没有示选中的文本,可能是因为没有触发change事件,所以记得触发。 下面我们给出具体示例: 示例1:普通select(单选框) 假设我们有一个select元素: <select id="fruit"> <option value="apple">苹果</option> <option value="banana">香蕉</option> <option value="orange">橙子</option> </select> 我们想值为'banana'的选项,可以这样: $('#fruit').val('banana').trigger('change'); 示例2:普通select(多选框) 多选框需要设置multiple属性: <select id="fruits" multiple> <option value="apple">苹果</option> <option value="banana">香蕉</option> <option value="orange">橙子</option> </select> 多个值(数组): $('#fruits').val(['apple', 'orange']).trigger('change'); 示例3:使用select2插件(单选框) 首先,初始化select2: $('#fruit').select2(); : $('#fruit').val('banana').trigger('change'); 示例4:使用select2插件(多选框) 初始化: $('#fruits').select2(); : $('#fruits').val(['apple','orange']).trigger('change'); 注意:如果option是动态加载的,需要确保在option已经添加到select之后再执行val()和trigger('change')。 另外,对于动态添加option并的情况,如引用[3]中的示例,他们通过ajax获取数据,然后使用append添加option,并设置selected属性,最后触发change。 根据上述方法,我们可以根据实际情况选择合适的方式。 生成相关问题: 1. 如何动态添加option到select元素? 2. 使用select2插件时,如何设置默认提示文字? 3. 如何清空select2的选择? 4. 在jQuery中,如何获取select选中的值? 5. 如何监听select元素的change事件?</think>在 jQuery 中实现 select 元素的数据主要有以下几种方法,根据引用资料提供示例: ### 方法 1:直接设置值并触发 change(推荐) ```javascript // 单选框 $("#selectId").val('要选中的值').trigger('change'); // 多选框(数组形式) $("#selectId").val(['值1', '值2']).trigger('change'); // [^4] ``` > **适用场景**:普通 selectSelect2 插件。需确保值完全匹配 option 的 value ### 方法 2:遍历选项设置 selected ```javascript var targetValue = "值"; $("#selectId option").each(function() { if($(this).val() === targetValue) { $(this).prop("selected", true); // [^2] } }); ``` ### 方法 3:Select2 插件特殊处理 ```javascript // 动态添加选项并(支持多选) function echoSelect2(dom, values) { $.each(values, function(index, item) { $(dom).append( new Option(item.text, item.id, false, true) // 直接标记为选中 ); }); $(dom).trigger("change"); // [^3] } // 调用示例 echoSelect2("#select1", [{id:1, text:"选项1"}, {id:2, text:"选项2"}]); ``` ### 关键注意事项 1. **动态加载数据**:若选项通过 AJAX 加载,需在数据返后再执行 2. **Select2 插件**:必须执行 `trigger('change')` 更新 UI[^3] 3. **多选支持**:多选框需传入数组值 `$().val([...])` 4. **值匹配**:确保值与 option 的 `value` 属性完全一致 > **示例场景**:编辑表单时数据库存储值 > ```javascript > // 从隐藏域获取存储值 > const dbValue = $("#hiddenField").val(); > $("#genderSelect").val(dbValue).trigger('change'); > ``` --- ###
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值