Question

我正在开发一个MVC4网络应用程序。一切正常，但在项目结束时，我有一个新的要求，我必须在近20页的每个下拉列表旁边显示一个加号图标，如。

enter image description here

在上面的项目下拉列表中，我手动添加了图标。但是我想在整个项目中的每个下拉列表中添加此图标。单击此图标时，将打开一个带有文本框的弹出窗口。用户将在此输入新项目并保存。

页面的常见结构是：

<div runat="server" id="divFormLayout" class="formLayout">
<div class="TabSectionL" style="width: 99%">
        <span class="TabSectionHeader">Item Details</span>
        <table cellpadding="4" cellspacing="4">
            <tr>
                <td>
                    Item
                </td>
                <td>
                    @if (ViewData["ItemDesc"] != null)
                    {
                        @Html.DropDownListFor(m => m.str_itemdsc, (SelectList)(ViewData["ItemDesc"]), "-Select-", new { @class = "validate[required] cairs_item_dropdown", tabindex = "1" })

                    }
                    else
                    {
                        @Html.DropDownList("str_itemdsc", new SelectList(""), "", new { tabindex = "1" })
                    }

                </td>
        </tr>
        </table>
    </div>
</div>

问题：如何在每个下拉列表旁边动态添加加号图标。

Answer 1

像这样：

$("select").each(function(){
    $("<a class='icon or whatever'></a>").insertAfter($(this));
});

Answer 2

您可以使用一些jquery代码来实现这一目标。

由于您的下拉列表位于<td>标记内，您可以选择您的DDL，然后将图标附加到其父级 - 实际上是<td>。因此，请将此代码放入_Layout：

<script>
    $(document).ready(function () {
        $("select").parent().append("<img src='...' />");
    });
</script>

如何使用jquery全局添加下拉列表旁边的图标按钮

2 个答案: