html的样式下拉框的联动,Web框架Ajax实现html下拉框联动
说明
页面代码
数据模型
Ajax联动
后台action
结语
说明
我们通过给两个下拉列表赋值案例来说明,下拉框1值通过属性值绑定AvailableCategories直接从后台获取,下拉框2值SensorList实现与下拉框1值变化而联动。
页面代码
下拉框1:
@Html.DropDownListFor(model => model.Cid, Model.AvailableCategories, new { @class = "form-control" })
下拉框2:
@Html.DropDownListFor(model => model.Sensor, Model.SensorList, new { @class = "form-control" })
数据模型
///
/// 下拉框1
///
public IList AvailableCategories { get; set; }
///
/// 下拉框1值
///
[NopResourceDisplayName("Search.Category")]
public int Cid { get; set; }
///
/// 下拉框2
///
public List SensorList { get; set; }
///
/// 下拉框2值
///
[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 sensorsList = new List();
sensorsList.Add(new SelectListItem { Text = _localizationService.GetResource("common.selected"), Value = "0" });
List 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、运行结果:
html的样式下拉框的联动,Web框架Ajax实现html下拉框联动相关推荐
- 单选框radio赋值 js 及Ajax,layui radio性别单选框赋值方法
html 性别 js layui.use('form', function () { var $ = layui.jquery, form = layui.form; $.ajax({ type: & ...
- html超出高度自动下一页,上滑web页面自动加载下一页
移动端常常是通过向上滑动到页面底部自动加载下一页内容,而不是点击"下一页"按钮进行加载.这是一个演示了自动加载下一页的小demo. html: html> 向上滑动自动加载后 ...
- windows下使用pip安装Python Web框架webpy
https://jingyan.baidu.com/article/e6c8503cb59b7be54f1a189b.html 转载于:https://www.cnblogs.com/PER10/p/ ...
- php可输入的下拉框,jQuery实现可输入搜索文字的下拉框实例代码
利用jQuery实现可输入搜索文字的下拉框 先看效果 功能:点击下拉框输入框时,自动显示下面的下拉列表,而且是根据输入框中输入的搜索添加,自动在后台查找,然后传到前台,展现页面. 用的的js: var ...
- ajax使用json下拉框,ajax请求后台得到json数据后动态生成树形下拉框的方法
如下所示: $(function(){ $.ajax({ url:"departmentAction_getAllDep.action", type:"post" ...
- 搜索引擎下拉食云速捷详细_下拉框优化才云速捷一流!下拉框优化虑云速捷豪杰...
现在不管做什么,都是需要流量,有了流量才能把自己手上的生意做好.不管是实体店微商,电商,还是互联网创业者,如果你拥有了流量,那么不管你选择去做什么产品,你都会一步到位,一飞冲天,实现自己的梦想.但是现 ...
- 搜索引擎下拉食云速捷详细_移动端下拉框寻云速捷/-/移动端下拉框跃云速捷-...
现在不管做什么,都是需要流量,有了流量才能把自己手上的生意做好.不管是实体店微商,电商,还是互联网创业者,如果你拥有了流量,那么不管你选择去做什么产品,你都会一步到位,一飞冲天,实现自己的梦想.但是现 ...
- 下拉搜索词api接口、淘宝搜索下拉框选词api,淘宝下拉词接口,淘宝搜索的下拉词推荐接口、关键词推荐api
一.下拉搜索框选词api介绍 淘宝搜索下拉框选词是通过淘宝.天猫.手机润宝搜索下拉框查询淘宝搜索指数高.流量高.转化率高的关键词,并获取各关键词对应的在线相关宝贝数量及其推荐属性词.对于查询到的这些关 ...
- 搜索引擎下拉食云速捷详细_下拉框搜索四云 速捷超稳,下拉框搜索康云速捷优选...
百度下拉框是什么呢,相信大家都很熟悉.百度作为国内领头老大搜索引擎,拥有十几亿的用户量,在流量方面可谓是资源充足. 那么搜索非常有效获取流量的方法老大是通过百度的下拉框筛选相关 关键词,当大家输入一个 ...
最新文章
- 压力测试过负载均衡_性能测试的方法有哪些?
- UVA 1025 A Spy in the Metro DP水题
- python实现简单的名字管理系统_python列表使用实现名字管理系统
- java.lang.OutOfMemoryError: Java heap space错误和方法(集、转)
- 修改配置_iMC服务器修改IP地址的配置
- arduino支持的内核版本_Arduino开发(arduino IDE)
- selenium + java po模式
- [转]HTTP Error 502.5 - Process Failure asp.net core error in IIS
- x64位游戏call代码测试注入器
- 科普:智能电话机器人语音识别技术
- (转载)RAID技术全解图解-RAID0、RAID1、RAID5、RAID100
- js随机飘动的广告图片代码demo效果示例(整理)
- 使用express+vue在网页上显示RTSP流视频
- c语言,简易密码输入
- 爬取百度 《一人之下》 贴吧
- 6-1 数据结构实验之排序八:快速排序 (20 分)
- OUC2021秋-计算机网络-期末(回忆版)
- flutter webview加载http图片失败处理
- 蓝桥杯 试题 基础练习 Sine之舞 c语言
- 史上最受瞩目的六大数据安全事件
热门文章
- 自学python 知乎-为什么自学Python看不进去?
- 实现html和word的相互转换(带图片)
- “空头”突袭瑞幸 浑水再次折戟?
- 示波器表笔旁边的夹子是什么_教你如何使用示波器的探头(校准、夹子和接线)...
- 英语发音技巧,让你的发音更地道!!!
- spline函数----三次样条数据插值
- Oracle表分区概念和实战
- Cadence Allegro创建Flash焊盘
- IP欺骗(XFF头等)
- VMware Pro v14.1.1 官方版本及激活密钥(转载)