6

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

4

4 回答 4

10

我的答案类似于 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/

于 2012-04-24T23:09:33.633 回答
3

@Ethan Brown's answer的变化，.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 上测试。

于 2014-12-12T11:10:58.150 回答
2

这是一个可以放入任何页面的通用 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>

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

于 2016-04-28T07:08:11.757 回答
1

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

<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/ 可以调整

于 2012-04-24T22:18:06.420 回答