这是我的代码:
<script language="JavaScript" type="text/javascript">
(function($) {
$(document).ready(function(){
var path = "http://shop.vodafone.co.uk",
phoneList = $('#phoneList');
$.getJSON("phones.json", function(data){
var option = $('option').attr('value', data);
var phones = [];
for(var phone in data) {
//phones.push("<option value='"+data[phone].value+"'>"+data[phone].name+"</option>");
phones.push(data[phone]);
}
//console.log(phones);
phones.sort(function(a, b){
var aName = a.name.toLowerCase(),
bName = b.name.toLowerCase();
if(aName < bName) {
return -1;
}
if(aName > bName){
return 1;
};
return 0;
});
var select = $('<option value="Take your pick"></option>').val();
var htmlElements = [];
for(var i = 0; i<phones.length; i++) {
htmlElements.push("<option value='"+phones[i].value+"'>"+phones[i].name+"</option>");
}
//htmlElements.before(select);
$("#phoneList").before(select).html(htmlElements.join('\n'));
//val = $(this).find('option:selected').val(),
});
$('.phoneSelect').bind('change', function(){
var url = $("#phoneList option:selected").val();
window.location = path + url;
});
});
})(jQuery);
</script>
这是HTML:
<div>
<form class="phoneSelect" action="#">
<select style="width: 200px" name="phoneMake" id="phoneList">
<option selected="selected" value="Take your pick">Take your pick</option>
</select>
</form>
</div>
问题是我试图在动态构建的下拉列表之前添加上述元素“选择”,并且所有元素都具有相同的表单元素。从 JSON 文件中检索下拉列表数据。
有人可以告诉我哪里出错了吗?