|
|
|
|
|
本文將介紹怎樣使用JQuery動(dòng)態(tài)增加下拉列表選項(xiàng)(option)。
項(xiàng)目(選項(xiàng))文本和值部分將從文本框中動(dòng)態(tài)提取,然后項(xiàng)目(選項(xiàng))將使用jquery添加到HTML下拉列表中。
使用JQuery動(dòng)態(tài)增加下拉列表選項(xiàng)
下面的HTML標(biāo)記由一個(gè)HTML下拉列表組成,在使用jquery單擊按鈕時(shí),項(xiàng)目(選項(xiàng))將被動(dòng)態(tài)添加到該列表中。
它還包含兩個(gè)HTML文本框和一個(gè)HTML按鈕元素。這兩個(gè)HTML文本框?qū)⒂糜诓东@HTML下拉列表的文本和值部分,而HTML按鈕將用于向HTML下拉列表添加項(xiàng)(選項(xiàng)/option)。
<html>
<head>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<br/>
<body>
<select id = "ddlFruits"></select>
<hr />
Text: <input type="text" id = "txtText" />
Value: <input type="text" id = "txtValue" />
<input type="button" id = "btnAdd" value = "Add" />
<script type="text/javascript">
$(function () {
$("#btnAdd").click(function () {
var option = $("<option />");
option.html($("#txtText").val());
option.val($("#txtValue").val());
$("#ddlFruits").append(option);
});
});
</script>
</body>
</body>
</html>
解釋:
首先,要調(diào)用jquery庫(kù)文件。
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
其次,程序?qū)崿F(xiàn)部分,單擊“添加(add)”按鈕時(shí),將執(zhí)行jquery click事件處理程序,其中首先引用HTML下拉列表,然后創(chuàng)建HTML選項(xiàng)元素。
文本部分使用html()
jquery函數(shù)設(shè)置,值部分使用html option元素的val()
jquery函數(shù)設(shè)置。
option.html()
option.val()
最后,使用append()
jquery函數(shù),HTML選項(xiàng)被添加到下拉列表中。