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

下拉菜单显示我的JSON文件中的第一个值而不是默认文本

3 个答案: