PHP下面利用jQuery实现option根据读出的值动态给予selected属性

最近在写一个项目,遇到一个问题,从数据库读出某产品对应的分类再打开编辑页面的时候,由于是循环输出option的值(非写死在模板里的固定值),导致了打开编辑页面默认选中总为排序在第一个的值。如图所示:

本来数据中,iPhone X对应的是苹果,而三星note8对应第分类是三星,但是默认的情况下,打开编辑页面只会显示苹果(排序在第一位),这样如果不小心掉了提交,就会导致本来正确的分类变成错误,当然也不没关,对于强迫症来说不能忍!

我们都知道在html语言中,option可以使用selected=”selected” 来指定默认选中项,但是由于option是利用php循环输出的,而且不固定,我们无法直接给予selected=”selected” 属性,所以只能另辟蹊径了,我们利用jQuery来进行操作,代码如下:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <?php
    $slt = 'iph';
    ?>
    <script type="text/javascript" src="//upcdn.b0.upaiyun.com/libs/jquery/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
        $(function(){
            var sltData = '<?php echo $slt;?>';
            $('#select option').each(function(){
                var self = $(this);
                var selfVal = self.val();
                if(selfVal == sltData) self.attr('selected' , 'true');
            });

        });
    </script>
</head>
<body>
<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>

这样动态赋予selected=”selected”属性,就实现了我们想要的动态选中对应项的方法。

海拔科技

自媒体人,喜欢网络,热爱研究。本站头条号:星河 熊掌号:海拔科技

相关推荐

WordPress时间函数the_time() 详细解析

之所以找the_time()函数的相关说明还是源于本站现在使用这个主题,刚刚发了一篇文章,被百度秒收,很开心,但是一看百度收录时间显示的是12小时前。 卧槽,这怎么回事,一看文章时间显示的真的是12小时之前,起 …

php去除换行符的几种方法(str_replace正则和PHP_EOL)

一个小小的换行符,其实在不同的平台有着不同的实现,为什么要这样,可以是世界是多样的。本来在unix世界换行就用/n来代替,但是windows为了体现他的不同,就用/r/n,更有意思的是在mac中用/r。因此unix系列用 / …