用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文件中，然后引用就可以！

方法僅供參考，歡迎交流！