使用jQuery和JSON自動填充選擇標籤

我想要根據另一個選擇標籤的值來填充一個選擇標籤。填充的選擇標記的值來自JSON文檔。使用jQuery和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不能正常工作。讓我知道你們是否有任何建議！

來源

2012-10-18 Spittal

你的JSON究竟是什麼？你想從中得到什麼？ –

'options ='';'該行在分配前應該有一個'+' – galaxyAbstractor

它的格式如下 Departing例如，在馬蹄灣）到達（在這種情況下，無論是departurebay或朗戴爾）時報（未顯示，但它們的存在在實際的JSON DOC） – Spittal

你JSON文檔需要進行重構了一下，方便迭代。

讓我們這個類的例子。

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

而且假設（使用ASP.NET MVC & 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 
        ); 
    }); 
});

來源

2012-10-18 22:02:06

看來你的問題是，你的JSON對象其實不是正常形成，如果你的Ajax請求真的返回：

var ferries = { ... }

你的JSON對象應該僅僅是

{ ... }

在來自服務器的響應中沒有可變分配。

來源

2012-10-19 01:28:59 JaredMcAteer

使用jQuery和JSON自動填充選擇標籤

回答

相關問題