jQuery select下拉選單復位效果

antzone發表於2017-04-04
jQuery

在實際應用中，可能需要復位select下拉選單的選中項。

下面就通過程式碼例項介紹一下如何利用jquery實現此功能，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(document).ready(function(){
  $("#bt").click(function(){
    $("#sel").find('option:first-child').attr('selected',"selected");
  })  
});
</script>
</head>
<body>
<select id="sel">
  <option value="0">-請選擇教程-</option>
  <option value="1">css教程</option>
  <option value="2">js教程</option>
  <option value="3">div教程</option>
  <option value="4">jquery教程</option>
</select>
<input type="button" id="bt" value="檢視效果"/>
</body>
</html>

上面的程式碼實現了我們的要求，程式碼非常的簡單，更多內容可以參閱相關閱讀。

相關閱讀:

（1）.find()方法可以參閱jQuery find()一章節。

（2）.first-child可以參閱jQuery :first-child一章節。

（3）.attr()方法可以參閱jQuery attr()一章節。

相關文章