无法设置jquery多选的宽度

Question

我正在使用jquery multi select进行下拉菜单，以便用户有机会从下拉列表中选择多个项目

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%');

  

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

您可以在style选项中设置包含classes的班级：

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

希望这有帮助。

Answer 2

这种情况正在发生，因为multiselect将你的select转换为一个标记，不是很高兴，它会删除你应用于select的所有类。 因此，让它服从你的最好方法是将类应用于对象id：

#drpTraj{
    width: 350px;
}

希望得到这个帮助。