javascript 下拉列表宽度适合所选项目文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10306796/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Drop down list width fit selected item text
提问by formatc
Is there a way in javascript/jquery or css to make html <select>/@Html.DropDownListauto width so it fits currently selected item, I tried with diplay:inline-blockand width:autobut width always seems to fit largest item on list?
在 javascript/jquery 或 css 中有没有办法使 html<select>/@Html.DropDownList自动宽度适合当前选定的项目，我尝试过diplay:inline-block，width:auto但宽度似乎总是适合列表中最大的项目？
回答by Ethan Brown
My answer is similar to D3mon-1stVFW's, but instead uses a hidden drop-down to set the width on dynamically. As long as you use the same styling for your hidden and "real" one, it should account for different font sizes, decoration, etc. Here's the HTML:
我的答案类似于 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>?
And the Javascript:
和 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/
JSFiddle在这里：http: //jsfiddle.net/kn9DF/1/
回答by mahemoff
Here's a generic jQuery function you can drop into any page. It immediately resizes all selectors and ensures they will be resized when they are changed.
这是一个可以放入任何页面的通用 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>The script is forked from Ethan and Ian's answers. The initSelectors function does need to be re-called if you add a selector, but it uses jQuery oneso it can be safely called multiple times if previous selectors remain on the page.
该脚本是从 Ethan 和 Ian 的答案中衍生出来的。如果添加选择器，则确实需要重新调用 initSelectors 函数，但它使用 jQuery，one因此如果以前的选择器保留在页面上，则可以安全地多次调用它。
回答by Hitham S. AlQadheeb
Use this sample I wrote. Use the same when you create the list, just get the default selected and set it in the span and get its width.
使用我写的这个示例。创建列表时使用相同的方法，只需选择默认值并将其设置在跨度中并获取其宽度。
<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>
? see http://jsfiddle.net/39ffp/2/it can be tweaked
? 见http://jsfiddle.net/39ffp/2/可以调整
回答by Ian Kemp
Variation on @Ethan Brown's answer, with the .val()corrected to .text()and a dynamically-created selectso your page isn't polluted:
@Ethan Brown's answer的变化，.val()更正为.text()和动态创建的，select这样你的页面就不会被污染：
HTML:
HTML：
<select id="sel">
<option>Short</option>
<option>Really, Really, Really Long</option>
</select>?
JS:
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/
http://jsfiddle.net/kn9DF/242/
Tested on Chrome 39, FF 36, IE 11.
在 Chrome 39、FF 36、IE 11 上测试。
