有沒有在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. 使HTML表格列固定寬度(並拉伸到適合)
- 3. 下拉列表截斷選項文本
- 4. 帶自動列表的下拉菜單 - 項目寬度
- 5. 獲取角NG選項下拉列表中選定的文本
- 6. Jquery 2下拉列表,從下拉列表中刪除選定的項目1
- 7. 使用文本從下拉列表中選擇項目
- 8. MVC4在選擇下拉列表項目時禁用文本框
- 9. jQuery:使用文本值在下拉列表中選擇項目
- 10. jQuery - 如何通過文本選擇下拉列表項目?
- 11. 在knockout.js中選擇下拉列表中的綁定選項和選項文本
- 12. 拉伸文本以適合div的寬度
- 13. 設置ASP.NET(4.0)列表框的寬度和高度以適合項目
- 14. php下拉列印選定項目
- 15. 的下拉列表選項
- 16. KendoUI設置下拉列表的寬度
- 17. 適合文本到位圖寬度
- 18. jQuery顯示從下拉列表中選擇的選項文本
- 19. 控制下拉列表框寬度
- 20. 要在java腳本下拉列表中獲取所選項目的文本
- 21. 設置下拉列表的選項列表高度
- 22. MVC下拉列表不拾取選定的項目?
- 23. 對下拉列表中選定項目的過濾器
- 24. 如何打印選定的項目下拉列表中HTHML
- 25. 從下拉列表中檢索選定的項目值
- 26. 更改下拉列表按鈕上的選定項目點擊
- 27. 如何在下拉列表中引用選定項目的值?
- 28. JSP下拉列表 - 使用選定的項目
- 29. 更改下拉列表控件在IE中的下拉寬度,而不會改變控件本身的寬度
- 30. Firewatir:Firewatir腳本從下拉列表中選擇一個項目
我只是好奇,爲什麼downvote? – formatc 2012-04-24 23:13:49