用Jquery实现修改页面selecte标签的默认选择

在WEB开发中，最基础的也是用的最多的就是数据库的增删改查，修改往往以为的小部分的改动，所以我们往往是在表单中填充以前的内容然后显示给用户进行修改操作。

   在填充默认内容的时候对于input标签我们往往使用value="<?php echo $value?>"的方法，例如:

<input type='text' name='username' value='<?php echo $username?>' />

 

 

但是对于select标签来说则没有这么简单了，因为他没有value属性。我们通常使用类似下面的代码来实现：

<select name="catelog">
   <?php foreach($catelogList as $k=>$v){?>
   <option value="<?php echo $v['id']?>" <?php if($_GET['id']==$v['id'])echo "selected";?>><?php echo $v['catelogName']?></option>
   <?php }?>
</select>

 

 

这样只要我们对每个select标签都做类似的输出和判断就可以达到我们的要求了，但是略显繁杂且不便于维护。下面我提供一种用Jquery实现的方法：

首先我们在输出select标签的时候将其默认值保存到自定义的default（其他的也可以）属性中：

<select name="mid" default="<?php echo $_GET['id']?>">
   <?php foreach($catelogList as $k=>$v){?>
   <option value="<?php echo $v['id']?>"><?php echo $v['catelogName']?></option>
   <?php }?>
</select>

 

然后我们在文档得head中或者</body>前导入jquery库文件：

<script src="/js/jquery-1.7.2.min.js" type="text/javascript"></script>

 

最后我们用js代码来实现自动为select标签选择默认项就可以了：

<script>
$(document).ready(function(e) {
   //调整下拉的默认选择
   $("select").each(function(index, element) {
      $(element).find("option[value='"+$(this).attr('default')+"']").attr('selected','selected');
   });
});
</script>

 

这样一来不但看起来简洁了，而且代码通用性很高，我们把后面的这个js代码可以放到单独的通用的js文件中，然后引用就可以！

方法仅供参考，欢迎交流！