下拉列表寬度適合選定的項目文本

Question

有沒有在javascript/jquery或css中製作html的方法<select>/@Html.DropDownList自動寬度，因此它適合當前選定的項目，我試過diplay:inline-block和width:auto但寬度總是似乎適合列表中的最大項目？

Answer 1

我的答案是類似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/

Answer 2

使用我寫的這個樣本。在創建列表時使用相同的方法，只需選取默認值並將其設置在範圍內並獲取其寬度即可。

<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/它可以調整

Answer 3

變化對@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

Answer 4

這裏是一個通用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，因此如果以前的選擇器保留在頁面上，可以安全地調用它多次。