有没有一种方法可以使用javascript/jquery或css来使html的<select>/@Html.DropDownList
自动调整宽度,以适应当前选择的项目?我尝试过使用diplay:inline-block
和width:auto
,但宽度似乎总是适合列表中最大的项目?
有没有一种方法可以使用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链接: 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));
});
});
Fiddle:
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>
<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/,可以进行微调。