av可免费在线观看网址,在线看片免费人成视频播,欧美亚洲愉拍一区二区

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

如何使用JQuery動(dòng)態(tài)填充下拉列表（DropDownList）或下拉菜單

作者:admin 時(shí)間:2019-8-23 17:2:31 瀏覽:

本文將用例子介紹如何動(dòng)態(tài)填充下拉列表（DropDownList）例如HTML Select元素，本例介紹在點(diǎn)擊按鈕后，使用jQuery從XML獲得HTML Select元素來填充下拉列表。

XML將被讀取和解析，然后使用jQuery逐個(gè)將來自XML的Node數(shù)據(jù)作為Items（Options）添加到DropDownList。

動(dòng)態(tài)填充下拉列表（DropDownList）

使用JQuery動(dòng)態(tài)填充下拉列表（DropDownList）

以下HTML標(biāo)記由HTML DropDownList和Button組成，單擊Button時(shí)，將解析XML并讀取其Node值并用于使用XML數(shù)據(jù)填充HTML DropDownList。

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

<input type="button" id="btnGenerate" value="填充下拉列表" onclick="PopulateDropDownList()" />
<hr />
<select id="ddlCustomers">
</select>

<script type="text/javascript">
function PopulateDropDownList() {
//創(chuàng)建一個(gè)包含客戶記錄的XML
var xml = "<Customers>";
xml += "<Customer>";
xml += "<CustomerId>1</CustomerId><Name>John Hammond</Name><Country>United States</Country>";
xml += "</Customer>";
xml += "<Customer>";
xml += "<CustomerId>2</CustomerId><Name>Mudassar Khan</Name><Country>India</Country>";
xml += "</Customer>"
xml += "<Customer>";
xml += "<CustomerId>3</CustomerId><Name>Suzanne Mathews</Name><Country>France</Country>";
xml += "</Customer>";
xml += "<Customer>";
xml += "<CustomerId>4</CustomerId><Name>Robert Schidner</Name><Country>Russia</Country>";
xml += "</Customer>";
xml += "</Customers>";

var xmlDoc = $.parseXML(xml);
var customers = $(xmlDoc).find("Customer");
var ddl = $("#ddlCustomers");
customers.each(function () {
    var option = $("<option />");

    //在Text部分設(shè)置客戶名
    option.html($(this).find("Name").text());

    //在Value部分設(shè)置客戶Id
    option.val($(this).find("CustomerId").text());

    //添加選擇元素到DropDownList
    ddl.append(option);
});
}
</script>

</body>
</html>