Question

功能

将下拉列表中的对象填充到下拉菜单中。 Json文件存储在root / ajax / .json中，而工作文件存储在root / .html中。

问题：

JSOn文件中没有任何对象填充下拉菜单。我试过console.log（数据），但它没有返回任何东西。我不知道在调用JSON文件以填充下拉菜单时失败了。

我在调用JSON文件时尝试了两种方法：

＆＃13;

#dropDownShops_1 {
  position: absolute;
  width: 330px;
  height: 59px;
  z-index: 90;
  top: 340px;
  left: 350px;
  outline: 0;
  border: 0;
}
#dropDownShops_2 {
  position: absolute;
  width: 330px;
  height: 59px;
  z-index: 90;
  top: 535px;
  left: 350px;
  outline: 0;
  border: 0;
}
select {
  margin: 50px;
  border: 1px solid #111;
  background: transparent;
  width: 150px;
  padding: 5px 35px 5px 5px;
  font-size: 16px;
  border: 1px solid yellow;
  height: 34px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url("../lib/image/Dropdown_arrow.png") 100% / 100% no-repeat #eee;
}

＆＃13;

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

＆＃13;

JSON文件：

有400件商品，但为了简单起见，我只缩减了3件商品：

{
"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"
}]   
}

方法1：

我尝试使用此方法，但下拉菜单中未显示任何内容，并且console.log中未显示任何内容

＆＃13;

//get a reference to the select element
var $select = $("#dropDownShops_1, #dropDownShops_2");

/*******************************************************
 *FUNCTION CALL TO POPULATE DROPDOWN MENU FROM JSON FILE*
 *******************************************************/
$(function() {
  //request the JSON data and parse into the select element
  $.getJSON('ajax/shops.json', function(data) {

    $select.html('');

    $.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>");
    });
  });

});

＆＃13;

方法2：

我试过使用这种方法，但它显示的是＃34;没有可用的＃34;因为它将直接调用错误：function（）：

//get a reference to the select element
    var $select = $("#dropDownShops_1, #dropDownShops_2");
/*******************************************************
        *FUNCTION CALL TO POPULATE DROPDOWN MENU FROM JSON FILE*
        *******************************************************/
        $.ajax({
            url: "ajax/shops.json",
            dataType: 'json',
            success: function(data) {
                console.log(data);

                $select.html('');
                $.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>");
                });
            },
            error:function(){
                //if there is an error append a 'none available' option
                $select.html('<option id="-1">none available</option>');
            }
        });

Answer 1

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dropDownShops_1">
    <option value="None" selected="Selected">Please Select Shops ...</option>
  </select>


  <select id="dropDownShops_2">
    <option value="None" selected="Selected">Please Select Shops ...</option>
  </select>

＆＃13;

<key>NSAppTransportSecurity</key>
    <dict>
    <key>NSExceptionDomains</key>
        <dict>
        <key>yourdomain.com</key>
            <dict>
                <key>NSIncludesSubdomains</key>
                <true/>         
                <key>NSThirdPartyExceptionRequiresForwardSecrecy</key>
                <false/>
            </dict>
        </dict>
    </dict>

＆＃13;

JSON文件中的对象未填充下拉菜单

1 个答案: