下拉列表宽度适合所选项目文本
Drop down list width fit selected item text
有没有办法在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/
相关文章:
- 在BootStrap菜单栏中为所选项目设置背景,类似于BootStrap中的父导航选项
- jQuery:根据select选项中的每页项目进行分页
- 更新:仅根据单选按钮和所选选项选择特定项目
- HTML选择,在DOM中选择了正确的选项,但在firefox中显示了错误的项目
- 如何在angular js中的select选项中获取所选项目id
- 如何将一个表单中的项目添加到 Rails 中另一个表单的下拉选项
- 当表单控件选项具有多个参数时,如何在组合框中填充所选项目
- 通过单击按钮将选项卡(项目)添加到选项卡面板,扩展
- 如何将此选项添加到此图像选取器项目中
- 更新“项目”选项以进行排序
- 在呈现项目后,挖空选择绑定回调的选项
- 在单击选项卡式项目时隐藏和创建另一个对象 - HTML CSS
- 使用表排序器筛选所选选项列表中的选定项目
- jQuery 在选项列表中重新填充所选项目
- 将项目插入活动选项卡窗格
- Microsoft Dynamics Online:将所有选项集项目复制到多行文本字段(使用 JavaScript)
- 在选择选项中选择多个项目,而不使用“Ctrl”键
- jQuery Mobile,在选项列表中选择所有项目
- 从下拉列表中选择项目后,显示新选项并显示文本
- 如何在浏览器窗口/选项卡关闭时删除本地存储项目