Jquery 如何强制我的Html.DropDownlist根据其内容长度具有灵活的大小

我有以下代码，在我的asp.net MVC web应用程序中显示下拉列表：-

<div><span class="f">@Html.DisplayNameFor(model => model.stateID)</span>
        @Html.DropDownListFor(model => model.stateID, ((IEnumerable<TMS.Models.ResourceState>)ViewBag.States).Select(option => new SelectListItem {
        Text = (option == null ? "None" : option.DISPLAYSTATE), 
        Value = option.RESOURCESTATEID.ToString(),
        Selected = (Model != null) && (Model != null ) &&  (option.RESOURCESTATEID == Model.stateID)
    }), "All") <i class=" icon icon-blue icon-star-on "></i>
          @Html.ValidationMessageFor(model => model.stateID) 

@Html.DisplayNameFor（model=>model.stateID）
@DropDownListFor（model=>model.stateID，（（IEnumerable）ViewBag.States）。选择（option=>newselectListItem{
Text=（option==null？“无”：option.DISPLAYSTATE），
Value=option.RESOURCESTATEID.ToString（），
所选=（Model！=null）&&（Model！=null）&&（option.RESOURCESTATEID==Model.stateID）
})“全部”）
@Html.ValidationMessageFor（model=>model.stateID）

当前下拉列表包含短4-5个字符的文本，但下拉列表似乎始终具有固定大小，并且大多数下拉列表大小未按如下方式使用：-

因此，我的问题是，我是否可以使下拉列表的大小灵活，以适应其中包含的文本，以便在这种情况下，我可以更好地利用屏幕

谢谢

---

是的。您可以使用

.change

事件处理程序使其灵活

首先，必须将所选文本存储到其他元素。我在这里使用了一个隐藏的输入

<input type="hidden" id="tmpwidth"/>

注意，我在临时隐藏输入的宽度后面加了30，因为这里30是

select

元素向下箭头的宽度

希望这能有所帮助

最后是小提琴

---

但是如果我选择短文本，然后选择长文本，下拉列表将不会重新调整大小。@johnG检查更新的小提琴。再次调整大小时，隐藏的输入似乎不能提供正确的宽度。我试过使用

div

，效果很好。

  $(function(){
    $("select").on("change", function(){
        $("#tmpwidth").html($('select option:selected').text());
        $(this).width($("#tmpwidth").width()+30);
    });
  });