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

Drop down list width fit selected item text

本文关键字：选项 项目 文本 下拉列表      更新时间：2023-09-26

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

我的答案类似于 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 here： http://jsfiddle.net/kn9DF/1/

@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上测试。

这是一个通用的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>

剧本是从伊森和伊恩的答案分叉而来的。如果添加选择器，确实需要重新调用 initSelectors 函数，但它使用 jQuery one，因此如果以前的选择器保留在页面上，则可以安全地多次调用它。

使用我写的这个示例。 创建列表时使用相同的方法，只需选择默认并在范围中设置它并获取其宽度即可。

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

相关文章：