根据显示的数据表值禁用下拉列表项

Posted 2023-05-09

【中文标题】根据显示的数据表值禁用下拉列表项

【英文标题】：Disable drop down list items based on showed Data Table values

【发布时间】：2019-10-02 12:31:44

【问题描述】：

我有一个页面，上面有 2 个项目 -

item - 1. 显示 2 列 SystemName、System-Description 的 Jquery DataTable。

item - 2. 一个包含一个下拉菜单和一个文本框的小表单。下拉列表包含系统名称，用户在文本框中输入一些描述并将值插入 DB。插入后，值会出现在 Jquery 数据表中。

作为 Jquery 数据表中的示例，当前提供了 3 个值。 系统 1、系统 2 和系统 3。

在下拉列表中有 7 项... System1, System2 ..... ,System7.

我想要实现的目标

我想根据显示的数据表禁用下拉列表中的项目。 所以考虑前面的例子 -

应在 DropDownList 中禁用“System1、System2 和 System3”项。

我的尝试：

我也尝试过使用 htmlHelper 扩展。但它不起作用。

这就是数据表和 DDL 的填充方式::

下拉列表：

控制器代码：

var flist = dbCtx.UserSystems.Where(l => l.InUse.Equals(false));
SelectList list = new SelectList(flist.ToList(), "SystemID", "SystemName");
ViewBag.sysnames = list;

剃刀代码：

@Html.DropDownListFor(model => Model.SystemID, ViewBag.sysnames as SelectList, "Select SystemID", new  @class = "form-control" )

数据表：

控制器代码：

SysViewModel.SysDetails = dbCtx.Get_UserSystem(Userid).ToList<Get_Get_UserSystem_Result>();

剃刀代码：

<table class="table table-striped table-bordered" id="">
    <thead class="navbar-dark navbar-dark bg-blue-grey white">
        <tr>
            <th>
                System Name
            </th>
            <th>
                Description
            </th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model.SysDetails)
        
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.SystemName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Desc)
                </td>
            </tr>
            
    </tbody>
</table>

【参考方案1】：

您可以通过以下方式禁用下拉选项

<select>
    @
        foreach (var item in List)
        
            if(condition)//check exist or not
            
            <option style="color:gray" disabled>
                @item.Name
            </option>
            
            else
            
            <option>
                @item.Name
            </option>
                
        
    
</select>