Question

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

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

Answer 1

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

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

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（最窄的）来证明字符宽度在此解决方案中无关紧要。

如何使select元素成为其当前选项的宽度

2 个答案: