jquery select下拉選單新增或者刪除option項

antzone發表於2017-03-31
jQuery

關於select下拉選單控制元件這裡就不多介紹了，因為使用實在是太頻繁了。

最為常見的操作就是為select下拉選單新增或者刪除option項。

一.新增option選項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function(){
  $("#sel").append("<option value='4'>螞蟻部落五</option>");
});
</script>
</head> 
<body>
<select id="sel">
  <option value="0">螞蟻部落一</option>
  <option value="1">螞蟻部落二</option>
  <option value="2">螞蟻部落三</option>
  <option value="3">螞蟻部落四</option>
</select>
</body> 
</html>

上面的程式碼可以為select下拉選單的尾部追加一個option選項，如果在開頭部分新增一個option項可以使用如下程式碼:

[JavaScript] 純文字檢視 複製程式碼
$("#sel").prepend("<option value='4'>螞蟻部落五</option>");

如果想要在下拉選單的任意位置插入option項可以參閱如何在select下拉選單的指定索引位置插入option項一章節。

二.刪除指定的option項:

下面介紹一下如何刪除一個option選項，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function(){
  $("#sel option:last").remove();
});
</script>
</head> 
<body>
<select id="sel">
  <option value="0">螞蟻部落一</option>
  <option value="1">螞蟻部落二</option>
  <option value="2">螞蟻部落三</option>
  <option value="3">螞蟻部落四</option>
</select>
</body> 
</html>

上面的程式碼可以將最後一個option選項刪除，其實刪除option項是非常的靈活的，例如:

[JavaScript] 純文字檢視 複製程式碼
$("#sel option[value='2']").remove(); //刪除value值為2的元素
$("#sel option[text='螞蟻部落一']").remove(); //刪除文字為螞蟻部落一的元素
$("#sel").empty(); //清空

相關文章