Question

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

任何人都可以解决这个问题吗？我也在使用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>

Answer 1

根据评论编辑：查看http://jsfiddle.net/HVHV2/2/。

$(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]);
    }
});

Answer 2

默认行为是获取select中最长选项的宽度。如果需要，您无法设置固定宽度width : 100px。如果你想动态地制作它，你将使用javascript。

Answer 3

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

减少长度项目（不是真正的解决方案）
使用Javascript编写您自己的下拉框控件，看看here

通常，您应该能够使用<ul>以与他们用于下拉菜单的方式类似的方式实现自定义解决方案，但实现JS以检测子项目点击事件并更改顶级<li>。

Answer 4

在你的html中添加span并使用这个JQuery代码：

Working demo

HTML

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

JQuery的

$( "#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);
});

设置下拉列表的宽度

4 个答案: