后台返回数据回显，使用js控制默认选中复选框和下拉框

最新推荐文章于 2025-01-02 13:13:08 发布

转载最新推荐文章于 2025-01-02 13:13:08 发布 · 516 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/jackduan/p/7742092.html

文章标签：

#php #javascript #ViewUI

本文介绍了一种使用PHP后端与jQuery前端相结合的方法，实现根据后端获取的数据来预填充表单中的复选框和下拉选项。通过JSON格式传递数据，并利用jQuery进行DOM元素状态的设置。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>测试</title>
<?php 
    $chk = array('ch1','ch3','ch5'); //后台获取checkbox选中id的数组
    $slt = 'iph';                    //后台获取select选中option的value
?>
<script type="text/javascript" src="//upcdn.b0.upaiyun.com/libs/jquery/jquery-1.8.3.min.js"></script>


<script type="text/javascript">
$(function(){

    var chkData = <?php echo json_encode($chk);?>;
    var sltData = '<?php echo $slt;?>';

    $('.chk').each(function(){
        var self = $(this);
        var selfId = self.attr('id');
        $.each(chkData, function(n, v){
            if(v == selfId) self.attr('checked' , 'true');
        });
    });

    $('#select option').each(function(){
        var self = $(this);
        var selfVal = self.val();
        if(selfVal == sltData) self.attr('selected' , 'true');
    });

});
</script>


</head>
<body>

    <p><input id="ch1" class="chk" type="checkbox" value="111">111</p>
    <p><input id="ch2" class="chk" type="checkbox" value="222">222</p>
    <p><input id="ch3" class="chk" type="checkbox" value="333">333</p>
    <p><input id="ch4" class="chk" type="checkbox" value="444">444</p>
    <p><input id="ch5" class="chk" type="checkbox" value="555">555</p>

    <div class="selectAera">
        <select id="select">
            <option value="smt">锤子</option>
            <option value="iph">苹果</option>
            <option value="xm">小米</option>
            <option value="nka">诺基亚</option>
        </select>
    </div>

</body>
</html>