jquery - 无法设置jquery多选的宽度

Question

我正在使用 jquery 多选作为下拉菜单，以便让用户有机会从下拉菜单中选择多个项目

html代码：

<div class="jobdiv">
    <img src="~/Images/traj.png" width="22" height="24" />
    @Html.DropDownListFor(model => Model.TrajName, @Model.Traj,
    new { @class = "jobdrpdown", id = "drpTraj", onchange = "GetSelectedTraj(this.value); ", multiple = "multiple" })
</div>

样式定义如下：

.jobdiv {
    margin-right: 15px;
    margin-left: 15px;
    padding-bottom: 12px;
}       

.jobdropdown {
    width: 194px;
    font-size: 13px;
    font-family: Arial;
    margin-right: 5px;
    height: 24px;
}

在$(document).ready(function ()：

$(document).ready(function () {

    $('#drpTraj').multiselect({
        nonSelectedText: 'Select items below',
        width : 180,
        minWidth : 180          
    });

}       

我的问题是我无法设置下拉菜单的宽度。我对几个组件使用相同的样式。但是单独的 jquery 多选并没有得到 width 属性。见下图：

此外，当我选择几个项目时，所选文本超出指定宽度。见下图：

如果我使用的是普通下拉菜单，它在这种情况下可以正常工作。提前感谢您提供任何宝贵的建议。

Answer 1

发生这种情况是因为多选将您的选择转换为 a 标记，不够高兴，它删除了您应用于选择的所有类。因此，让它服从你的最好方法是将类应用于对象 id：

#drpTraj{
    width: 350px;
}

希望这有帮助。

Answer 2

您是否尝试使用以下方法设置宽度.css()：

$('#drpTraj .ui-multiselect').css('width', '100%');

我对几个组件使用相同的样式。

您可以设置选项中包含您的style类classes：

$('#drpTraj').multiselect({
    nonSelectedText: 'Select items below',
    classes : "your-class-name"     
});

希望这可以帮助。