免费成人高清在线视频,免费萌白酱国产一区二区三区

技術(shù)頻道 - js技術(shù)

怎樣使用JQuery動態(tài)增加下拉列表選項（option）

作者:admin 時間:2019-8-24 19:9:50 瀏覽:

本文將介紹怎樣使用JQuery動態(tài)增加下拉列表選項（option）。

項目（選項）文本和值部分將從文本框中動態(tài)提取，然后項目（選項）將使用jquery添加到HTML下拉列表中。

使用JQuery動態(tài)增加下拉列表選項

下面的HTML標(biāo)記由一個HTML下拉列表組成，在使用jquery單擊按鈕時，項目（選項）將被動態(tài)添加到該列表中。

它還包含兩個HTML文本框和一個HTML按鈕元素。這兩個HTML文本框?qū)⒂糜诓东@HTML下拉列表的文本和值部分，而HTML按鈕將用于向HTML下拉列表添加項（選項/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>