大佬教程收集整理的这篇文章主要介绍了jquery – 使用xml文件填充下拉菜单，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <Meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" media="all" href="style.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <title>Using jQuery and XML to populate a drop-down Box demo</title> <script> $(document).ready(function(){ $.ajax({ type: "GET",url: "make.xml",dataType: "xml",success: function(xml) { var SELEct = $('#mySELEct'); $(xml).find('dropdown').each(function(){ $(this).find('make').each(function(){ var value = $(this).text(); SELEct.append("<option class='ddindent' value='"+ value +"'>"+value+"</option>"); }); }); SELEct.children(":first").text("SELEct Make").attr("SELEcted",truE); } //sucess close }); }); </script> </head> <body> <div id="page-wrap"> <SELEct id="mySELEct"> <option>loading</option> </SELEct> </div> </body> </html>
这是xml文件
<?xml version="1.0" encoding="iso-8859-1"?> <dropdown> <make>Acura</make> <make>Aston MarTin</make> <make>Audi</make> <make>Bently</make> <make>BMW</make> <make>Buick</make> <make>Cadillac</make> <make>Chevrolet</make> <make>Chrylser</make> <make>Dodge</make> <make>Eagle</make> <make>Ferrari</make> <make>Ford</make> <make>Geo</make> <make>GMC</make> <make>Honda</make> <make>Hummer</make> <make>Hyundai</make> <make>Infiniti</make> <make>Isuzu</make> <make>Jaguar</make> <make>jeep</make> </dropdown>
<dropdown>
<make value="1">Acura</make>
<make value="4">Aston MarTin</make>
<make value="34">Audi</make>
...
</dropdown>
然后在你的jquery循环中：
$(xml).find('dropdown').each(function(){
$(this).find('make').each(function(){
var value = $(this).attr('value');
var label = $(this).text();
SELEct.append("<option class='ddindent' value='"+ value +"'>"+label+"</option>");
});
});
请注意,您可以像这样(未经测试)简化和加速您的jquery：
$('make',xml).each(function(){
var value = $(this).attr('value');
var label = $(this).text();
SELEct.append("<option class='ddindent' value='"+ value +"'>"+label+"</option>");
});
对于另一个重要的性能提升,只需要一个append()而不是你有“make”节点的append().
var optionsHtml = new Array(); $('make',xml).each(function(){ var value = $(this).attr('value'); var label = $(this).text(); optionsHtml.push( "<option class='ddindent' value='"+ value +"'>"+label+"</option>"); }); optionsHtml = optionsHtml.join(''); SELEct.append(optionsHtml);
以上是大佬教程为你收集整理的jquery – 使用xml文件填充下拉菜单全部内容，希望文章能够帮你解决jquery – 使用xml文件填充下拉菜单所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。