本文共 2401 字，大约阅读时间需要 8 分钟。

开发工具与关键技术： Visual Studio 2015 mvc

作者：彭水清

撰写时间：2019/5/29

需要怎样写才能实现绑定下拉框同时并回填呢？

首先我们来看一下代码部分，绑定酒菜小类名称下拉框，我用到SelectVo这个实体类，SelectVo有两个字段public

int id { get; set; }选中值；public string text { get; set; }显示值。

重点：想要实现以下所有功能要引用这个插件 customfunction.js 。插件里面有封装好的方法，然后调用其方法。

• jquery 根据url创建下拉框

• @author en

• @param fromId form表单id

• @param url 查询下拉框的url

• @param value 设置值

function createSelect(selectId, url,

value) {

(defaultValue);

$.post(url,

function (jsonData) {

//当用户传过来的ID值不带#号时，为标量拼接上#号    if (selectId.indexOf('#') != 0) { selectId = '#' + selectId; }    //清空该元素    $(selectId).empty();    //创建option    for (k in jsonData) {        $(selectId).append('' + jsonData[k].text + '');}    //设置选中值    if (value != undefined && value != null && value != '') {        $(selectId).val(value);    }});

}

一、绑定酒菜小类名称下拉框

public ActionResult selectWGSmallName()

{

//查询数据

List list = (from tbWGSmall in

myModels.WGSmall select new SelectVo {

id =

tbWGSmall.WGSmallID,

text = tbWGSmall.WGSmallName}).ToList();

// 拼接“请选择”项

list = Common.Tools.SetSelectJson(list);

return Json(list, JsonRequestBehavior.AllowGet);

}

绑定酒菜小类名称下拉框的效果图：

//绑定下拉框

createSelect(“WGSmallName”,"/BackStageManagement/EssentialData/selectWGSmallName");

//下拉框改变事件

$("#WGSmallName").change(function () {

//获取到酒菜小类ID

var WGSmallID = $("#WGSmallName").val();

//通过getJSON获取到酒菜小类表的所有数据（拼接参数—酒菜小类ID）

$.getJSON("/BackStageManagement/EssentialData/selectWGSmallID?WGSmallID=" + WGSmallID, function (data) {

//回填酒菜小类编号                $("#WGSmallNumber").val(data[0].WGSmallNumber);                //获取到酒菜大类ID                var WGBigID = data[0].WGBigID;

//通过getJSON获取到酒菜大类的所有数据（拼接参数—酒菜大类ID）

$.getJSON("/BackStageManagement/EssentialData/selectWGBigID?WGBigID=" + WGBigID, function (data) {

//回填酒菜大类名称                 $("#WGBigName").val(data[0].WGBigName);

});

});

二、通过酒菜小类ID绑定酒菜小类编号

public ActionResult selectWGSmallID(int WGSmallID)

{

Listlist=myModels.WGSmall.Where(L=>L.WGSmallID

== WGSmallID). Select(L => L).ToList();

return Json(list, JsonRequestBehavior.AllowGet);

}

三、通过酒菜大类ID绑定所属大类

public ActionResult selectWGBigID(int WGBigID)

{

List
   
     list = myModels.WGBig.Where(L => L.WGBigID ==
   

WGBigID).Select(L => L).ToList();

return Json(list, JsonRequestBehavior.AllowGet);

}

选择下拉框同时回填小类和大类的效果图：

那么我们就完成了下拉框以及回填了。那就让我们在回顾一下

首先，绑定酒菜小类名称下拉框，然后写回填；其次，通过酒菜小类ID绑定酒菜小类编号；然后，通过酒菜大类ID绑定所属大类。重要的一点引用这个插件 customfunction.js 调用方法。

@水平有限，错误和失误在所难免，若有如何意见和建议，请不吝指正，谢谢！

转载地址：https://blog.csdn.net/weixin_44540414/article/details/90786400 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！