Web框架Ajax实现html下拉框联动

Html下拉框主要体现在select标签和option标签,Web开发平台中我们使用mvc html扩展方法@Html.DropDownListFor()来 轻松绑定下拉列表属性值,我们已一段代码说明给下拉列表来怎么动态赋值。
说明
页面代码
数据模型
Ajax联动
后台action
结语
说明

我们通过给两个下拉列表赋值案例来说明,下拉框1值通过属性值绑定AvailableCategories直接从后台获取,下拉框2值SensorList实现与下拉框1值变化而联动。

页面代码

<div class="form-group row">
<div class="col-md-2">
          <label>下拉框1:</label>
</div>
<div class="col-md-2">
          @Html.DropDownListFor(model => model.Cid, Model.AvailableCategories, new { @class = "form-control" })
</div>
<div class="col-md-2">
          <label>下拉框2:</label>
</div>
<div class="col-md-2">
          @Html.DropDownListFor(model => model.Sensor, Model.SensorList, new { @class = "form-control" })
</div>
</div>

数据模型

/// <summary>
/// 下拉框1
/// </summary>
public IList<SelectListItem> AvailableCategories { get; set; }
/// <summary>
/// 下拉框1值
/// </summary>
[NopResourceDisplayName("Search.Category")]
public int Cid { get; set; }
/// <summary>
/// 下拉框2
/// </summary>
public List<SelectListItem> SensorList { get; set; }
/// <summary>
/// 下拉框2值
/// </summary>
[AllowHtml]
public string Sensor { get; set; }

Ajax联动

$(function () {
$('#Cid').change(function () {
var data = "cid=" + $(this).val();
var disoptioan = {
url: "@Url.Action("GetCamaraSensors", "Catalog")",
type: 'Get',
dataType: 'json',
data: data,
context: this,
success: function (result) {
$("#Sensor").empty();
for (var i = 0; i < result.length; i++) {
var text = result[i].Text;
var value = result[i].Value;
$("#Sensor").append(new Option(text, value));
}
}
};
$.ajax(disoptioan);
});
});

后台action

public ActionResult GetCamaraSensors(int cid)
{
IList<SelectListItem> sensorsList = new List<SelectListItem>();
sensorsList.Add(new SelectListItem { Text = _localizationService.GetResource("common.selected"), Value = "0" });
List<ProductCategory> productCategories = _categoryService.GetProductCategoriesByCategoryId(cid, 0, int.MaxValue).ToList();
productCategories.ForEach(p =>
{
sensorsList.Add(new SelectListItem { Text = p.Product.Name, Value = p.ProductId.ToString() });
});
return Json(sensorsList, JsonRequestBehavior.AllowGet);
}

结语

1、AvailableCategories中SelectListItem是一个有text和mvalue特性的类,web开发平台中通过ViewModel绑定赋值给下拉框1。
2、SensorList中SelectListItem是一个有text和mvalue特性的类,通过Ajax异步从后台获取列表值后动态绑定赋值给下拉框2。
3、Ajax代码说明:下拉框1值改变后触发js change事件,通过ajax异步提交查询获取查询结果,success回调函数中赋值给下拉框2。
4、运行结果:

web框架下拉框1结果
下拉框2结果

网站&系统开发技术学习交流群:463167176

本站文章除注明转载外,均为本站原创或翻译,欢迎任何形式的转载,但请务必注明出处,尊重他人劳动,共创和谐网络环境。
转载请注明:文章转载自:华晨软件-云微开发平台 » Web框架Ajax实现html下拉框联动
本文标题:Web框架Ajax实现html下拉框联动
本文地址:http://www.hocode.com/OrgTec/UI/0006.html

相关文章: 初识MVC框架--Model与ViewModel | 深入Web框架-DropDownList的常见错误 | 深入Web框架-CheckBox和DropDownList的绑定值和获取值

电话
电话 18718672256

扫一扫
二维码