我必须使用json在html标签内填充选项数据,但我不确定如何准确传递数据。
THE JSON
[{"citta_provincia":"AGRIGENTO - ARAGONA","comune":"ARAGONA"},{"citta_provincia":"ALESSANDRIA - SAN MICHELE","comune":"SAN MICHELE"},{"citta_provincia":"ANCONA","comune":"ANCONA"}]
HTML
<select class="field-s mandatory" id="dedaler_city" name="dealer_city">
<option selected>Scegli...</option>
</select>
THE JAVASCRIPT
$cittasel = $('#dedaler_city');
$.ajax({
url: "http://path-to-json.json",
dataType: 'HTML',
success: function(data) {
var parsa = $.parseJSON(data);
$.each(parsa, function(key, value) {
$cittasel.html("<option value='" + value + "'>" + value + "'</option>'");
});
},
error:function(){
$cittasel.html('<option id="-1">not aviable</option>');
}
});
我需要知道如何将值传递给填充选项字段,任何人都可以帮助我吗?
答案 0 :(得分:-1)
CssClass="widget-dropdown-Ajax-Postback"
在javascript中使用JQuery获取ajax下拉列表
var ajaxtsddropdown = $("select.widget-dropdown-Ajax-Postback");
if (ajaxtsddropdown.length > 0) {
ajaxtsddropdown.removeClass("gvi-widget-dropdown-Ajax-Postback");
ajaxtsddropdown.ajaxdropdown(
{
url: "/AjaxHelp/GetItems"
});
ajaxtsddropdown.on("ajaxdropdownselect", function (event, data) {
if (data.select.val()) {
$("#ajaxSelected").val(data.select.val());
data.select.change();
}
});
}
这将选择更改并转到json文件以呈现信息。 在Ajax Controller中,添加
public JsonResult GetItems()
{
return Json(Controller.GetDropDownItems(),
JsonRequestBehavior.AllowGet);
}
在后面的代码中,调用类
if (CustomPostBack)
{
DropDown.CssClass = "widget-dropdown-Ajax-Postback";
}
这将调用json。
然后,json调用将转到您的控制器并检索您的项目,但您要检索它们(服务调用,实体框架等)。这些数据将传回您的下拉列表
如果您有服务设置,请致电该服务。否则,将服务替换为实体框架并循环遍历数据库。
public static ListItem[] GetDropDownItems()
{
var list = new List<ListItem>();
List<ItemsofInterest> itemsofInterest= new List<ItemsofInterest>();
ServiceAdapter.InvokeService(ser => { itemsofInterest= ser.GetItemsofInterest(); });
var items = itemsofInterest.Select(cd => cd.itemNumber).Distinct().ToList();
foreach (var item in items)
{
ListItem currentItem = new ListItem(itemNumber);
list.Add(currentItem);
}
list.Insert(0, new ListItem("Select an item"));
return list.ToArray();
}