Question

javascript / jquery或css中是否有一种方法可以使html <select>/@Html.DropDownList自动宽度，因此它适合当前选定的项目，我尝试使用diplay:inline-block和width:auto，但宽度似乎总是适合列表中最大的项目？

Answer 1

我的回答类似于D3mon-1stVFW，但是使用隐藏的下拉菜单动态设置宽度。只要你为隐藏和“真实”使用相同的样式，它应该考虑不同的字体大小，装饰等。这是HTML：

<!-- this is our hidden "template" drop-down that we'll
     use to determine the size of our "real" one -->
<select id="template" style="display:none;">
  <option id="templateOption"></option>
</select>
<!-- this is our "real" template that will be re-sized -->
<select id="sel">
  <option>Short</option>
  <option>Really, Really, Really Long</option>
</select>

和Javascript：

function setSelectWidth() {
  var sel = $('#sel');
  $('#templateOption').text( sel.val() );
  // for some reason, a small fudge factor is needed
  // so that the text doesn't become clipped
  sel.width( $('#template').width() * 1.03 );
}

$(document).ready( function() {
  setSelectWidth();

  $('#sel').change( function() {
    setSelectWidth();
  } );    
});

JSFiddle：http://jsfiddle.net/kn9DF/1/

Answer 2

这是一个可以放入任何页面的通用jQuery函数。它会立即调整所有选择器的大小，并确保它们在更改后会调整大小。

＆＃13;

function setSelectWidth() {
    var $yardstick = $('<select><option>' + $(this).val() + '</option></select>')
    $yardstick.css({display: 'none'}).appendTo('body');
    var fudge = 1.03; // need a little more to avoid clipping for some reason    
    $(this).width( fudge * $yardstick.width() );
    $yardstick.remove();
}

function initSelectors() {
  $('select').each(function() {
    setSelectWidth.apply(this);
  }).one('change', function() {
    setSelectWidth.apply(this);
  });
}

initSelectors();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- examples -->
<select id="example-1">
    <option>Short</option>
    <option>Really, Really, Really Long</option>
</select>

<select id="example-2">
    <option>Tiny</option>
    <option>A bit bigger</option>
    <option>Huuuuuuuuuuuuuuuuuuuuge</option>    
</select>

＆＃13;

脚本是从Ethan和Ian的答案中分出来的。如果添加选择器，则需要重新调用initSelectors函数，但它使用jQuery one，因此如果以前的选择器保留在页面上，则可以安全地多次调用它。

Answer 3

使用我写的这个样本。在创建列表时使用相同的内容，只需选择默认值并在跨度中设置并获取其宽度。

<script>
    function newSelected(ele){
       document.getElementById('jsize').innerHTML = ele.value;
       document.getElementById('selectList').style.width = ($(jsize).width()+30)+'px';
    }

</script>

<span id="jsize" style="display:none"></span><br />

<select id="selectList" onchange="newSelected(this);">
    <option>small item</option>
    <option>a really big long item</option>
</select>

见http://jsfiddle.net/39ffp/2/可以调整

Answer 4

@Ethan Brown答案的变化，.val()更正为.text()，动态创建select，因此您的页面不会受到污染：

HTML：

<select id="sel">
  <option>Short</option>
  <option>Really, Really, Really Long</option>
</select>

JS：

function setSelectWidth(selector) {
    var sel = $(selector);
    var tempSel = $("<select style='display:none'>")
        .append($("<option>").text(sel.find("option:selected").text()));
    tempSel.appendTo($("body"));

    sel.width(tempSel.width());

    tempSel.remove();
}

$(function() {
    setSelectWidth("#sel");

    $("#sel").on("change", function() {
        setSelectWidth($(this));
    });
});

小提琴：

http://jsfiddle.net/kn9DF/242/

在Chrome 39，FF 36，IE 11上测试。

下拉列表宽度适合所选项目文本

4 个答案: