jquery - 如何使选择元素成为其当前选项的宽度

Question

我正在创建一个表单，并且需要选择元素来扩展/收缩到其当前选项的宽度。它当前的宽度是它最长的选项。

CSS 只能用于给选择一个固定的宽度，并在一个选项上使用 jQuery .width() 函数返回 0px。

Answer 1

选择元素完全由浏览器呈现。据我所知，你不能钩它。唯一的解决方案是自己测量选项并动态调整选择元素的大小。

这不是一个好的解决方案，因为很难测量非等宽字体，但这可能就足够了。

演示：http: //jsfiddle.net/qqcc5/

jQuery('#yourSelect').change(function() {
    optionValue = jQuery('#yourSelect option:selected').val();
    jQuery('#yourSelect').width(20 + (optionValue.length * 8));
});

Answer 2

就像 MVP 说的，你不能，不是真的。但你可以伪造它。这是我的方法：

function update_select_width() {
    //approximate pixel width of <select>'s arrow button -
    //might not be needed in all browsers, not sure
    var buffer = 24;

    //create a hidden <span> containing the selected option's text
    var temp_span = $('<span>').html($(this).val()).hide();

    //add the <span> to the DOM to give it measurable width
    $('body').append(temp_span);

    //set the width of the select box to the width of the <span>,
    //plus the buffer for the arrow button
    $(this).width($(temp_span).width() + buffer);

    //remove the <span> we created
    $(temp_span).remove();
}

//call once to set initial width
update_select_width.call($('#select_id'));

$('#select_id').change(update_select_width);

这应该准确到实际宽度<option>——只要 和 的字体<option>相同<span>——因为它在 DOM 中创建和测量包含您想要的文本的物理元素。

• 演示：http: //jsfiddle.net/rfwWR/11/

我使用M（英文字母表中最宽的字符）和i（最窄的）来证明字符宽度在此解决方案中并不重要。