HTML、jsp頁面中radio，checkbox，select數據回顯功能，默認被選中問題

最近常常遇到各種復選框、單選框、下拉框的默認被選中的問題，開始也是絞盡腦汁的想辦法，今天寫一篇學習總結的博文來寫一下學習總結。

單選框（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      微信公眾號，有興趣關注一下謝謝支持。