Html 设置下拉列表的宽度

在以下给定的小提琴中：

我希望所有的下拉列表与第一个条目的文本宽度相同。 与第一个下拉列表一样，下拉列表的宽度必须等于“按类别”的宽度。 由于某些原因，它采用了其中一个选项的宽度

有人能纠正这一点吗？ 我也在使用bootstrap

<div class="form-inline">
    <span class="inlineControl">
        <select name="ctl00$ctl00$MainContentPlaceHolder$MainContent$contentFilters$drpCategory" id="drpCategory">
    <option value="0">By Category</option>
    <option value="application-programming-interfaces-apis">Application Programming Interfaces (APIs)</option>
    <option value="application-service-providers-asps">Application Service Providers (ASPs)</option>
        </select>
   </span>
    <span class="inlineControl">
        <select name="ctl00$ctl00$MainContentPlaceHolder$MainContent$contentFilters$drpUsers" id="drpUsers">
    <option value="0">By Actor In role</option>
    <option value="not-role">(Not role)</option>
    <option value="tom_cruise">Tom Cruise</option>
    <option value="Angelina">Angelina Jolie</option>
    <option value="Heidi">Heidi Klum</option>
        </select>
        </span>
</div>        

按类别
应用程序编程接口（API）
应用程序服务提供商（ASP）
由演员扮演
（不是角色）
汤姆克鲁斯
安吉丽娜·朱莉
海蒂·克鲁姆

根据评论编辑：签出

$（文档）.ready（函数（）{
var ddl=$（“#drpCategory”）；
var savedOptions=[]；
var ddlpoptions=ddl.find（'option'）；
对于（变量i=1；i

默认行为是采用select中最长选项的宽度。如果需要，您不能设置固定宽度

宽度：100px

。如果您想动态地进行此操作，您将使用javascript。

不幸的是，您运气不好……跨浏览器，下拉列表的宽度完全由最长项目的长度决定。控制列表宽度的两种方法是：

缩短项目的长度（不是真正的解决方案）

使用Javascript编写您自己的下拉框控件，看一看

---

通常，您应该能够使用

实现自定义解决方案，其方式与下拉菜单使用的方式类似，但实现JS可以检测子项单击事件并更改顶层

在html中添加
span
，并使用此JQuery代码：


HTML

很抱歉，您使两个下拉列表的宽度相等。我希望第一个下拉列表只显示第一个选项的宽度，而不是最长选项的宽度。根据您的评论进行编辑。唷！！这看起来有很多代码。。我们正在寻找一些css解决方案正如其他海报所指出的，你不会得到一个下拉列表，它的宽度总是css中第一项的宽度。您可以通过CSS设置手动宽度，该宽度可能恰好是第一个项目的宽度，但不会动态调整。
$(document).ready(function() {
    var ddl = $('#drpCategory');
    var savedOptions = [];

    var ddlOptions = ddl.find('option');
    for (var i = 1; i < ddlOptions.length; i++) {
        var curOption = ddlOptions[i];
        savedOptions.push(curOption);
        $(curOption).remove();
    }

    ddl.width(ddl.width());


    for (var i = 0; i < savedOptions.length; i++) {
        ddl.append(savedOptions[i]);
    }
});

<span id="checkW" style="display:none;"></span>

$( "#checkW" ).text($( "#drpCategory option:selected" ).text());
$( "#drpCategory" ).width($( "#checkW" ).width()+30);
$( "#drpCategory" )
  .change(function () {
    var str = "";
    $( "#drpCategory option:selected" ).each(function() {
      str += $( this ).text() + " ";
    });
    $( "#checkW" ).text( str );    
  })
.change(function(){
    $( "#drpCategory" ).width($( "#checkW" ).width()+30);
});