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 multiselect 单独无法获取 width 属性。见下图:

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

如果我使用普通的下拉菜单，在这种情况下效果很好。预先感谢您提供任何宝贵的建议。

Answer 1

您是否尝试过使用 .css() 设置宽度:

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

I am using the same style for several components.

您可以在classes选项中设置具有您的style的类:

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

希望这有帮助。