尝试在动态构建的下拉列表之前添加元素

时间:2012-08-22 12:43:34

标签: jquery json drop-down-menu dynamic-data

这是我的代码:

<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文件中检索下拉列表数据。

有人可以告诉我哪里出错了吗?

1 个答案:

答案 0 :(得分:0)

尝试在循环时附加数字:

for(var i=0; i<phones.length; i++){
    $("#phoneList").append($("<option value='"+phones[i].value+"'>"+phones[i].name+"</option>"));
}