Select2是否适用于@ Html.DropDownList宽度较小的Jquery UI对话框？

如何解决Select2是否适用于@ Html.DropDownList宽度较小的Jquery UI对话框？

我正在MVC＃中工作，我有一个div，可以使用jQuery作为对话框打开，如下所示：

<div id="dialog">
    <form action="" method="post" dir="ltr">
        <div>
            @Html.DropDownList("LKP_Managers",null," ",htmlAttributes: new { @class = "form-control " })
        </div>
    </form>
</div>

默认情况下，该对话框的autoOpen设置为false：

$("#dialog").dialog({
    autoOpen: false
});

function OnEdit(link) {
    $("#dialog").dialog("open");
}

点击后即可查看：

<input type="button" id="model.NationalID" class="btn btn-info"  onclick="javascript:OnEdit(id);" />

但是，下拉菜单显示的宽度很小，我看不到它的值。在此对话框之外，select2在其他任何地方都可以正常工作。

我发现解决方案是CSS解决方案，但是当我只希望它应用于此特定下拉菜单时，它适用于所有下拉菜单：

.select2-container {
    width: 100% !important;
}

.select2-search--dropdown .select2-search__field {
    width: 98%;
}

是否可以修改上面的CSS，使其仅在我的对话框下拉菜单 LKP_Managers 中实现？

解决方法

您可以在下拉菜单中添加自定义类，然后修改CSS以仅在该类上运行。这会将名为<v-chart :options="option"></v-chart>的类添加到您的lkp-managers元素中：

<select>

然后您可以将CSS应用于该类：

@Html.DropDownList(
  "LKP_Managers",null," ",htmlAttributes: new { @class = "form-control lkp-managers" }
)

然后，您的select2定义需要将container width设置为.select2-container.lkp-managers { width: 100% !important; }，以便从resolve元素的<select>属性中确定宽度：

style

另一种选择是简单地在select2实例本身上设置主题，然后可以修改搜索字段的宽度以及容器：

$('.your-select2-definition').select2({
  /* ... */
  width: 'resolve',})

您的样式为

$('.your-select2-definition').select2({
  /* ... */
  theme: 'lkp-managers',})