最近在写一个项目,遇到一个问题,从数据库读出某产品对应的分类再打开编辑页面的时候,由于是循环输出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”属性,就实现了我们想要的动态选中对应项的方法。