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

Question

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

- formatc

---

我只是好奇，为什么要踩票？ - formatc

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/

- Ethan Brown

---

谢谢，运行得很好，但我有点惊讶它需要这么多的黑客技巧。 - formatc

在我的情况下，当我将“width：auto”样式设置为模板元素时，它起作用了。 - Bat_Programmer

Answer 2

以下是对 @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));
    });
});

Fiddle:

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

在Chrome 39、FF 36和IE 11上测试通过。

- Ian Kemp

Answer 3

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

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();

<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>

- mahemoff

Answer 4

使用我写的这个示例。在创建列表时使用相同的示例，只需获取默认选择并将其设置在 span 中，并获取其宽度。

<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/，可以进行微调。

- Sully

---

还是一样的。我会去js fiddle测试一下，也许我的代码有问题。 - formatc

仍然无法在FF 11中运行，Ethan从您的答案中得到了正确的信息。 - formatc