Jquery 如何限制下拉列表的宽度

我有一个html表，其中包含一些dropdownlist

<table>
    <thead>
        <tr>
            <th>@Html.LabelFor(model => model.WorkorderId)</th>
            <th>@Html.LabelFor(model => model.SubmissionDate)</th>
            <th>@Html.LabelFor(model => model.PartId)</th>
            <th>@Html.LabelFor(model => model.ActivityId)</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>@Html.DropDownList("WorkorderId", (SelectList) ViewBag.Workorders, string.Empty)</td>
            <td>@Html.TextBoxFor(model => model.SubmissionDate, "{0:MM/dd/yyyy}", new { @class = "datefield" })</td>
            <td>@Html.DropDownList("PartId", (SelectList) ViewBag.Parts, string.Empty)</td>
            <td>@Html.DropDownList("ActivityId", (SelectList) ViewBag.Activities, string.Empty)</td>
        </tr>
    </tbody>
</table>

我想将下拉列表的宽度限制为PartNumber（无描述）的长度。现在，下拉列表的宽度等于PartNumer-Description中最长的部分

select {
    width:10em;
}

---

是否有一种方法可以在选中时仅显示零件号（12345），而在单击下拉列表时显示整个内容（编号-说明）？

将下拉列表的宽度限制为150px：

 @Html.DropDownList("WorkorderId", (SelectList) ViewBag.Workorders, new { @style = "max-width:150px;" }

---

要将dropdownlist的宽度限制为150px，请执行以下操作：

 @Html.DropDownList("WorkorderId", (SelectList) ViewBag.Workorders, new { @style = "max-width:150px;" }

---

如果您在

select

元素上设置CSS宽度，它会将元素的宽度固定为您想要的宽度。但是，选项仍将显示完整的编号和说明

select {
    width:10em;
}

---

如果您在

select

元素上设置CSS宽度，它会将元素的宽度固定为您想要的宽度。但是，选项仍将显示完整的编号和说明

select {
    width:10em;
}

---

可以在MVC html帮助程序中添加样式。只需使用“New”关键字，后跟括号，并在括号内添加样式。像这样：

 @Html.DropDownList("WorkorderId", (SelectList) ViewBag.Workorders, new { style = "width:100px;" }

---

或者，您可以定义CSS类并在html帮助程序中应用该类。你可以去看看这两种方式

您可以在MVC html帮助程序中添加样式。只需使用“New”关键字，后跟括号，并在括号内添加样式。像这样：

 @Html.DropDownList("WorkorderId", (SelectList) ViewBag.Workorders, new { style = "width:100px;" }

或者，您可以定义CSS类并在html帮助程序中应用该类。你可以去看看这两种方式

问题是“最大宽度：150px；”（至少在Chrome中）将截短下拉列表，而不是突然切断盒端的任何内容，并丢失右端的下拉箭头。问题是“最大宽度：150px；”（至少在Chrome中）将只是截断下拉列表，而不是突然在框的末端（如框的末端）截断任何内容，并丢失右端的下拉箭头。