我有这个select元素有不同的选项.通常,select元素将从最大的选项元素获取其宽度,但是我希望select元素的默认选项值的宽度更短.当用户选择另一个选项时,select元素应该自己调整大小,使整个文本始终在元素中可见.
$(document).ready(function() {
$('select').change(function(){
$(this).width($('select option:selected').width());
});
});
问题：
>在Chrome(Canary)上它总是得到一个返回0的宽度.
>在Firefox上,当选择较短的选项时,宽度被添加,而不是调整大小.
> Safari：与Chrome相同的结果.
Demo @ JSFiddle
解决方法
你是对的,没有简单或内置的方式来获取特定选择选项的大小.这是一个
JsFiddle,做你想要的.
最新版本的Chrome,Firefox,IE,Opera和Safari都可以.
我已经添加了一个隐藏的选择#width_tmp_select来计算我们想要自动调整大小的可见选择#resizing_select的宽度.我们将隐藏的选择设置为具有单个选项,其文本是可见选择的当前选择的选项.然后我们使用隐藏选择的宽度作为可见选择的宽度.请注意,使用隐藏的跨度而不是隐藏的选择可以很好地工作,但是宽度将在下面的评论中由sami-al-subhi指出.
$(document).ready(function() {
$('#resizing_select').change(function(){
$("#width_tmp_option").html($('#resizing_select option:selected').text());
$(this).width($("#width_tmp_select").width());
});
});
#resizing_select {
width: 50px;
}
#width_tmp_select{
display : none;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> <select id="resizing_select"> <option>All</option> <option>Longer</option> <option>A very very long string...</option> </select> <select id="width_tmp_select"> <option id="width_tmp_option"></option> </select>