前端页面中各种常用数据回显、默认被选中问题——JS学习笔录

版权声明:每个人都是自己的上帝。如果你自己都放弃自己了,还有谁会救你?------《肖申克的救赎》本文为博主原创文章,欢迎转载(记得注明出处,拜托~)。 https://blog.csdn.net/hu_belif/article/details/80907771

最近常常遇到各种复选框、单选框、下拉框的默认被选中的问题,开始也是绞尽脑汁的想办法,今天写一篇学习总结的博文来写一下学习总结。

单选框(radio)默认被选中:

一、jstl技术进行回显

<input type="radio" name="sex"
<f:if test="${c.sex=='男' }">checked="checked"</f:if> value="男" />男    
<input type="radio" name="sex"
<f:if test="${c.sex=='女' }">checked="checked"</f:if> value="女" />女

首先是通过jstl表达式来赋值,同时用分支判断来判断值,成立则执行‘checked=“checked”’选中当前radio。

注意:页面要主动引入jstl标签库哦。<%

@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="f"%>

二、下面是Ajax的方法回显

$.post("update.do", $("form").serialize(), function(res) {
            for(var i in res){
                $("input[name='sex']").val(res[i].sex).prop("checked", true);
            }
        }, "json");
<input type="radio" name="sex" value="男" />男
				<input type="radio" name="sex" value="女"/>女

 

注意:返回值中的集合对象中必须 有sex这个值。

复选框(ckeckbox)默认被选中:

设计思路:

  1. 通过ajax加载页面数据后将数据存入隐藏域中
  2. 用jQuery读取隐藏域的数据存入变量中
  3. 遍历复选框,判断复选框的值是否与变量值一致
  4. 一致的话便通过prop或attr来选中复选框

这个复选框的根据数据默认被选中就不演示了。

 

复选框永久默认被选中的实现代码:

 

<input name="checkbox" type="checkbox" value="checkbox" checked="checked" />

 

下拉框(select)数据回显,默认被选中:

 

设计思路:

  1. 通过ajax加载页面数据后将数据存入隐藏域中
  2. 用jQuery读取隐藏域的数据存入变量中
  3. 遍历下拉框,判断下拉框的值或内容是否与变量值一致
  4. 一致的话便通过prop或attr来设置当前的option为选中

实现代码:

 

$.ajax({
	method : "get",
	url : "QueryAllDomainServlet",
	dataType : "json",
	async : false,
	success : function(res) {
	var select = $("#select");
	for (var i = 0; i < res.length; i++) {
	    var option = $('<option value="'+res[i].zid+'">'
	        + res[i].zname + '</option>');
	    select.append(option);
	    }
	},
	error : function() {
		alert("下拉框加载异常!");
	}
});
<input type="hidden" value="" id="optionT" />
<select id="select">
<option value="0">--请选择--</option>
<option value="1">张三</option>
<!-- 通过ajax加载 -->
</select>

核心代码:

/***下拉框默认被选中(数据回显)*****/
$("#select").children("option").each(function(){
	if($(this).val() == $("#optionT").val()){
		$(this).attr("selected",true);
	}
});

 

 

下面是一个最简洁的写法:

$("#select").val(res[i].zid);//直接在下拉菜单中追加值即可。

 

以上就是本人总结的默认被选中的方法。

欢迎批评建议,感谢采纳。

H080701-0      微信公众号,有兴趣关注一下谢谢支持。

阅读更多

没有更多推荐了,返回首页