技術頻道導航
HTML/CSS
.NET技術
IIS技術
PHP技術
Js/JQuery
Photoshop
Fireworks
服務器技術
操作系統(tǒng)
網(wǎng)站運營

贊助商

分類目錄

贊助商

最新文章

搜索

如何用JQuery刪除或清空下拉列表的選項

作者:admin    時間:2019-8-25 17:36:47    瀏覽:

本文介紹如何使用JQuery刪除或清空下拉列表的選項。

JQuery刪除下拉列表的選擇項

JQuery刪除下拉列表的選擇項

JQuery清空下拉列表

JQuery清空下拉列表

JQuery刪除下拉列表的選擇項

以下HTML標記由HTML下拉列表控件和按鈕組成。

單擊按鈕時，將執(zhí)行jquery click事件處理程序。在此事件處理程序中，HTML 下拉列表控件的選定項（selected option）將被刪除（delete）。

<html>
<head>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

<select id="ddlFruits" style="width: 150px;">
  <option value="1">Mango</option>
  <option value="2">Apple</option>
  <option value="3">Banana</option>
  <option value="4">Guava</option>
  <option value="5">Pineapple</option>
  <option value="6">Papaya</option>
  <option value="7">Grapes</option>
</select>
<br />
<hr />
<input type="button" id="btnDelete" value="Delete" />

<script type="text/javascript">
$(function () {
  $("#btnDelete").bind("click", function () {
    $("#ddlFruits option:selected").remove();
  });
});
</script>

</body>
</html>

execcodegetcode

JQuery刪除下拉列表的選擇項

JQuery刪除下拉列表的選擇項

JQuery清空下拉列表

以下HTML標記由下拉列表控件和按鈕組成。

單擊按鈕時，將執(zhí)行jquery click事件處理程序。在此事件處理程序中，使用jquery remove()函數(shù)刪除（delete）下拉列表控件的所有項。

<html>
<head>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

<select id="ddlFruits" style="width: 150px;">
  <option value="1">Mango</option>
  <option value="2">Apple</option>
  <option value="3">Banana</option>
  <option value="4">Guava</option>
  <option value="5">Pineapple</option>
  <option value="6">Papaya</option>
  <option value="7">Grapes</option>
</select>
<br />
<hr />
<input type="button" id="btnDelete" value="Delete" />

<script type="text/javascript">
$(function () {
  $("#btnDelete").bind("click", function () {
    $("#ddlFruits option").remove();
  });
});
</script>

</body>
</html>

execcodegetcode

JQuery清空下拉列表

JQuery清空下拉列表

注意事項

上述兩實例程序代碼，均需首先調(diào)用JQuery庫文件。

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

您可能對以下文章也感興趣

x
  • 站長推薦
/* 左側顯示文章內(nèi)容目錄 */