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