Question

我正在尝试根据另一个select标记的值填充一个select标记。填充的选择标记的值来自JSON文档。

这里的实际用途是用于离开渡轮码头以及它们可以到达的终端。

以下是我正在使用的代码段

$(function(){
  $("select#departingfrom").change(function(){
    $.getJSON("/database.json", $(this).val(), function(ferries){
      var options = '';
      for (var key in ferries) {
        options += '<option value=' + key + '>' + key + '</option>';
      }
      $("select#arrivingto").html(options);
    });
  });
});

以下是JSON文档的一个小例子

var ferries = {
  "horseshoebay": {
    "departurebay": {},
    "langdale": {}
  },
  "departurebay": {
    "horeshoebay": {}
  },
  "tsawwassen": {
    "swartzbay": {},
    "dukepoint": {}
  },
  "swartzbay": {
    "tsawwassen": {},
    "fulfordharbour": {}
  },
  "dukepoint": {
    "tsawwassen": {}
  },
  "langdale": {
    "horeshoebay": {}
  },
  "fulfordharbour": {
    "swartzbay": {}
  }
},

然后是HTML

<select id="departingfrom">
  <option selected="selected"></option>
  <option value="tsawwassen">Tsawwassen (Vancouver)</option>
  <option value="swartzbay">Swartz Bay (Victoria)</option>
  <option value="dukepoint">Duke Point (Nanaimo)</option>
  <option value="departurebay">Departure Bay (Nanaimo)</option>
  <option value="horseshoebay">Horseshoe Bay (North Vancouver)</option>
  <option value="langdale">Langdale (Sunshine Coast)</option>
  <option value="fulfordharbour">Fulford Harbour (Salt Spring Island)</option>
</select>

<select id="arrivingto">
  <option selected="selected"></option>
</select>

我的生活似乎无法让“功能（渡轮）”运行，所以它让我认为.val无法正常工作。如果你们有任何建议，请告诉我们！

Answer 1

您的JSON文档需要进行一些重构才能更轻松地进行迭代。

我们以此课程为例。

public class City
{
    public int CityID { get; set; }
    public string Name { get; set; }
    public int StateID { get; set; }
}

让我们说（使用ASP.NET MVC＆amp; C＃）我们返回JSON ：

    // the theStateID will be for California in this example
    public JsonResult FilterCitiesByStateID(int theStateID)
    {
        List<City> citiesList = null;

        citiesList = new CustomDb().Cities.Where(x => x.StateID == 
                                                    stateID).ToList();

        return Json(citiesList, JsonRequestBehavior.AllowGet);
    }

这将为我们提供加利福尼亚城市对象的列表。（假装CityID是有意义的。）

enter image description here

所以现在你只需要将它们附加到具有正确值和文本的选择列表中。

var $request = $.get('/Controller/Action/', { theStateID: 1 });

$request.success(function (listOfOptions) {
    // Iterate over the cities returned and append them to the
    // select list you need
    $.each(listOfOptions, function (key, obj) {
        $('select#YourSelect')
            .append($("<option></option>")
                         .attr("value", obj.CityID) // The value will be the CityID
                         .text(obj.Name) // The text will be the City's Name
                     );
     });
});

Answer 2

如果您的ajax请求实际返回，您的问题似乎是您的JSON对象实际上没有正确形成：

var ferries = { ... }

您的JSON对象应该只是

{ ... }

在服务器的响应中没有变量赋值。

使用jQuery和JSON自动填充选择标记

2 个答案: