有没有在javascript/jquery或css中制作html的方法<select>/@Html.DropDownList
自动宽度,因此它适合当前选定的项目,我试过diplay:inline-block
和width:auto
但宽度总是似乎适合列表中的最大项目?下拉列表宽度适合选定的项目文本
4
A
回答
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/
+0
谢谢,作品很有魅力,但我很惊讶,它需要这么多黑客。 – formatc 2012-04-24 23:14:55
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/它可以调整
1
变化对@Ethan布朗的回答,与纠正,以.text()
的.val()
和动态创建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
1
这里是一个通用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
,因此如果以前的选择器保留在页面上,可以安全地调用它多次。
相关问题
- 1. 如何设置绝对定位下拉菜单的宽度以适合最长的列表项目?
- 2. 下拉列表截断选项文本
- 3. 使HTML表格列固定宽度(并拉伸到适合)
- 4. 带自动列表的下拉菜单 - 项目宽度
- 5. 获取角NG选项下拉列表中选定的文本
- 6. 减少/增加下拉列表的宽度(选项标签)
- 7. 选择的项目 - 下拉列表 - SQL
- 8. 下拉列表选择的项目
- 9. Jquery 2下拉列表,从下拉列表中删除选定的项目1
- 10. 可滚动的p数据表列宽度适合文本
- 11. 使用文本从下拉列表中选择项目
- 12. jQuery:使用文本值在下拉列表中选择项目
- 13. MVC4在选择下拉列表项目时禁用文本框
- 14. jQuery - 如何通过文本选择下拉列表项目?
- 15. 如何更改下拉列表中特定选项的文本?
- 16. 在knockout.js中选择下拉列表中的绑定选项和选项文本
- 17. 选择下拉列表中的已选项目/选择列表
- 18. 列表框项目宽度
- 19. 设置ASP.NET(4.0)列表框的宽度和高度以适合项目
- 20. 拉伸文本以适合div的宽度
- 21. php下拉列印选定项目
- 22. 下拉列表后,新项目选择
- 23. 的下拉列表选项
- 24. 下拉项目文本选择
- 25. 设置下拉列表的宽度
- 26. 更改下拉列表的宽度
- 27. KendoUI设置下拉列表的宽度
- 28. 使用Knockout在下拉列表中绑定选定的项目
- 29. CSS两列适合特定宽度
- 30. 适合文本到位图宽度
我只是好奇,为什么downvote? – formatc 2012-04-24 23:13:49