嘗試一個動態生成的下拉列表前添加元素

這是我的代碼：嘗試一個動態生成的下拉列表前添加元素

<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文件中檢索下拉列表數據。

有人能告訴我我要去哪裏嗎？

來源

2012-08-22 Emmanuel Ndibe

如果我明白你試圖在這裏實現什麼，你想建立一個'select'但第一要素應該是'把你的pick'。 –

選擇下拉菜單可行，但我希望第一個元素是不可點擊的顯示文本。下拉菜單中的其他選項可點擊。目前下拉菜單中的第一個選項是應該可點擊的選項之一，但不是。 –

嘗試添加的數字，而循環：

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

來源

2012-08-22 12:48:34 SparK

謝謝！我的問題是，動態添加下拉列表並將其排序後，第一個元素將作爲下拉列表的默認顯示並使其不可點擊。我實際上想爲下拉菜單添加默認顯示文字。 –

我不想刪除第一個元素，而是在它之前添加一個元素作爲顯示文本。 –

這是我的問題。據我所知，.html（）覆蓋了select id =「phoneList」元素中的所有內容，包括第一個選項value =「Take your pick」元素。我嘗試使用.before（）函數添加選項value =「Take your pick」元素，但它將其添加到下拉菜單之外。此代碼構建下拉菜單： $（「＃phoneList」）。html（htmlElements.join（'\ n'））; 我添加了.before（）來創建它： $（「＃phoneList」）。before（select）.html（htmlElements.join（'\ n'））; 選擇變量是'var select = $（''）.val（）;'。這是行不通的。 –

嘗試一個動態生成的下拉列表前添加元素

回答

相關問題