第一段代码工作正常,但我想知道为什么我的第二段代码不起作用。我在控制台中没有收到任何错误,但选择下拉列表中没有显示任何内容。
作品
var select = $('<select />');
$.each(json, function(grp, lnk) {
var group = $('<optgroup />', { label:grp });
$.each(lnk, function(txt, val) {
$('<option />', { value:val, text:txt }).appendTo(group);
});
group.appendTo(select);
});
破碎的
var select = $('<select />').append(function() {
$.each(json, function(grp, lnk) {
return $('<optgroup />', { label:grp }).append(function() {
$.each(lnk, function(txt, val) {
return $('<option />', { value:val, text:txt });
});
});
});
});
JSON w3.js
var w3BaseUrl = 'http://www.w3schools.com/';
var w3 = {
'HTML / CSS' : {
'Learn HTML' : 'html/default.asp',
'Learn HTML5' : 'html/html5_intro.asp',
'Learn CSS' : 'css/default.asp',
'Learn CSS3' : 'css3/default.asp',
},
'JavaScript' : {
'Learn JavaScript' : 'js/default.asp',
'Learn HTML DOM' : 'htmldom/default.asp',
'Learn jQuery' : 'jquery/default.asp',
'Learn AJAX' : 'ajax/default.asp',
'Learn JSON' : 'json/default.asp',
'Learn Google Maps' : 'googleAPI/default.asp',
},
'Server Side' : {
'Learn PHP' : 'php/default.asp',
'Learn SQL' : 'sql/default.asp',
'Learn ASP' : 'asp/default.asp',
'Learn ADO' : 'ado/default.asp',
'Learn VBScript' : 'vbscript/default.asp',
},
'ASP.NET' : {
'Learn ASP.NET' : 'aspnet/default.asp',
'Learn Web Pages' : 'aspnet/webpages_intro.asp',
'Learn Razor' : 'aspnet/razor_intro.asp',
'Learn MVC' : 'aspnet/mvc_intro.asp',
'Learn Web Forms' : 'aspnet/aspnet_intro.asp',
'Learn .NET Mobile' : 'dotnetmobile/default.asp',
},
'XML Tutorials' : {
'Learn XML' : 'xml/default.asp',
'Learn DTD' : 'dtd/default.asp',
'Learn XML' : 'DOM dom/default.asp',
'Learn XSLT' : 'xsl/default.asp',
'Learn XPath' : 'xpath/default.asp',
'Learn XQuery' : 'xquery/default.asp',
'Learn XLink' : 'xlink/default.asp',
'Learn XPointer' : 'xlink/default.asp',
'Learn Schema' : 'schema/default.asp',
'Learn XSL-FO' : 'xslfo/default.asp',
'Learn SVG' : 'svg/default.asp',
},
'Web Services' : {
'Learn Web Services' : 'webservices/default.asp',
'Learn WSDL' : 'wsdl/default.asp',
'Learn SOAP' : 'soap/default.asp',
'Learn RSS' : 'rss/default.asp',
'Learn RDF' : 'rdf/default.asp',
},
'Web Building' : {
'Web Building' : 'web/default.asp',
'Web Browsers' : 'browsers/default.asp',
'Web Certification' : 'cert/default.asp',
'Web Hosting' : 'hosting/default.asp',
'Web TCP/IP' : 'tcpip/default.asp',
'Web W3C' : 'w3c/default.asp',
'Web Quality' : 'quality/default.asp',
},
};
Javascript utils.js
function setSelect(selId, json, baseUrl) {
var select = $('<select />');
$.each(json, function(grp, lnk) {
var group = $('<optgroup />', { label:grp });
$.each(lnk, function(txt, val) {
$('<option />', { value:val, text:txt }).appendTo(group);
});
group.appendTo(select);
});
select.change(function() {
window.open(baseUrl+select.val(),'_blank');
});
$(selId).replaceWith(select);
};
function setSelect2(selId, json, baseUrl) {
var select = $('<select />').append(function() {
$.each(json, function(grp, lnk) {
return ($('<optgroup />', { label:grp }).append(function() {
$.each(lnk, function(txt, val) {
return $('<option />', { value:val, text:txt });
)});
)});
)});
});
select.change(function() {
window.open(baseUrl+select.val(),'_blank');
});
$(selId).replaceWith(select);
}
HTML
<!html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script rel="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script rel="javascript" type="text/javascript" src="utils.js"></script>
<script rel="javascript" type="text/javascript" src="w3.js"></script>
<script type="text/javascript">
$(document).ready(function() {
setSelect('#w3', w3, w3BaseUrl);
});
</script>
</head>
<body>
<h1>W3Schools</h1>
<select id="w3"></select>
</body>
</html>