下拉菜单是从我的JSON文件，而不是默认的文本

Question

功能的第一个值..

用户是选择的项目（从JSON文件中读取），显示在下拉菜单中。在显示项目名称之前，下拉菜单应该有默认文本“请选择商店...”。

问题：

的“请选择商店......”缺少与第一项实际显示而不是默认的文本默认文本。我已经设置了以下下拉<select>标签具有以下属性：

<select id="dropDownShops_1"> 
    <option value="" selected disabled>Please Select Shops ...</option> 
</select> 

因此，我想寻求帮助：出了什么问题，以及如何我在显示“请选择商店... ...”前显示从JSON文件读取的项目？

CODE：

plnkr link（不知怎的，默认的文本呈现，但JSON列表不显示，但在我的问题：JSON列表中删除显示下降，但不是默认的文本）

 //get a reference to the select element 
 
    var $select = $("#dropDownShops_1, #dropDownShops_2"); 
 

 
    $(function() { 
 
     /******************************************************* 
 
     *FUNCTION CALL TO POPULATE DROPDOWN MENU FROM JSON FILE* 
 
     *******************************************************/ 
 

 
     //request the JSON data and parse into the select element 
 
     $.getJSON('ajax/shops.json', function(data) { 
 
     $select.html(''); 
 
     console.log("shops: " + data.Shops); 
 
     $.each(data.Shops, function(key, value) { 
 
      console.log("value:" + value); 
 
      //iterate over the data and append a select option 
 
      $select.append("<option >" + value.ShopName + "</option>"); 
 
     }); 
 
     }); 
 

 
     $("img").on("dragstart", function(event) { 
 
     event.preventDefault(); 
 
     }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <!-- DropDown Menu to choose Participating Outlet --> 
 
    <select id="dropDownShops_1"> 
 
    <option value="" selected disabled>Please Select Shops ...</option> 
 
    </select> 
 
    <select id="dropDownShops_2"> 
 
    <option value="" selected disabled>Please Select Shops ...</option> 
 
    </select> 
 
</form>

JSON文件：

{ 
"Shops": [ 
{ 
    "ShopName": "7-ven", 
    "ShopID": "7-ven123", 
    "Shoplocation": "#02-31" 
}, { 
    "ShopName": "8Tarstries", 
    "ShopID": "8Tarstries123", 
    "Shoplocation": "#B2-K4" 
}, { 
    "ShopName": "A|hange", 
    "ShopID": "A|hange123", 
    "Shoplocation": "#01-202" 
}] 
} 

Answer 1

不要在你的代码中的一些变化如下，

$select.append("<option value='' selected disabled>Please Select Shops.. </option>"); 
$.each(data.Shops, function(key, value) { 

    console.log("value:" + value); 
    //iterate over the data and append a select option 
    $select.append("<option >" + value.ShopName + "</option>"); 

}); 

Answer 2

刚刚从你的代码中删除此

$select.html(''); 

// get a reference to the select element 
 
var $select = $("#dropDownShops_1, #dropDownShops_2"); 
 

 

 
$(function() { 
 

 
    /******************************************************* 
 
    *FUNCTION CALL TO POPULATE DROPDOWN MENU FROM JSON FILE* 
 
    *******************************************************/ 
 

 
    //request the JSON data and parse into the select element 
 
    var data = { Shops: ['a','b'] } 
 
    
 
    
 
    console.log("shops: " + data.Shops); 
 

 
    $.each(data.Shops, function(key, value) { 
 

 
     console.log("value:" + value); 
 
     //iterate over the data and append a select option 
 
     $select.append($('<option>',{ value: value, text: value})); 
 

 
    }); 
 
    
 

 
    $("img").on("dragstart", function(event) { 
 
    event.preventDefault(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 

 
    <!-- DropDown Menu to choose Participating Outlet --> 
 
    <select id="dropDownShops_1"> 
 
    <option value="" selected disabled>Please Select Shops ...</option> 
 
    </select> 
 

 
    <select id="dropDownShops_2"> 
 
    <option value="" selected disabled>Please Select Shops ...</option> 
 
    </select> 
 

 
</form>

Answer 3

检查该解决方案

$('#dropDownShops_1').append("<option >" + value.ShopName + "</option>"); 

http://plnkr.co/edit/58yMCfo4X7w0NwqS1v0y?p=preview