根据选定的OPTION宽度自动调整SELECT元素的大小
我有这个select元素与不同的option 。 通常， select元素将从最大的option元素中获取宽度，但我希望select元素具有较短的默认option值宽度。 当用户select另一个option ， select元素应该调整自己的大小，使得整个文本始终在元素中可见。
$(document).ready(function() { $('select').change(function(){ $(this).width($('select option:selected').width()); }); });
问题：
- 在Chrome（金丝雀）它总是得到一个宽度返回0。
- 在Firefox上，宽度get被添加，并且在select较短的选项时不被resize。
- Safari：与Chrome相同。
演示@ JSFiddle
你是没有容易或内置的方式来获得一个特定的select选项的大小。 这是一个JsFiddle做你想做的。
最新版本的Chrome, Firefox, IE, Opera and Safari 。
我已经添加了一个隐藏的select#width_tmp_select来计算我们想要自动resize的可见select#resizing_select的宽度。 我们设置隐藏的select有一个选项，其文本是可见select的当前select的选项。 然后我们使用隐藏select的宽度作为可见select的宽度。 请注意，使用隐藏的跨度而不是隐藏的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="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>
这里是我为这个问题写的一个插件，它dynamic地创build和销毁一个模拟span所以它不会混乱你的html。 这有助于分离问题，让您委派该function，并允许跨多个元素轻松重复使用。
随时随地包含这个JS：
(function($, window){ var arrowWidth = 30; $.fn.resizeselect = function(settings) { return this.each(function() { $(this).change(function(){ var $this = $(this); // create test element var text = $this.find("option:selected").text(); var $test = $("<span>").html(text).css({ "font-size": $this.css("font-size"), // ensures same size text "visibility": "hidden" // prevents FOUC }); // add to parent, get width, and get out $test.appendTo($this.parent()); var width = $test.width(); $test.remove(); // set select width $this.width(width + arrowWidth); // run on start }).change(); }); }; // run by default $("select.resizeselect").resizeselect(); })(jQuery, window);
您可以通过以下两种方式之一来初始化插件：
-
HTML – 将
.resizeselect类添加到任何select元素：<select class="btn btn-select resizeselect "> <option>All</option> <option>Longer</option> <option>A very very long string...</option> </select> -
JavaScript – 在任何jQuery对象上调用
.resizeselect()：$("select"). resizeselect ()
这里是一个在jsFiddle的演示
这里是一个在堆栈片段中的演示：
(function($, window){ var arrowWidth = 30; $.fn.resizeselect = function(settings) { return this.each(function() { $(this).change(function(){ var $this = $(this); // create test element var text = $this.find("option:selected").text(); var $test = $("<span>").html(text).css({ "font-size": $this.css("font-size"), // ensures same size text "visibility": "hidden" // prevents FOUC }); // add to parent, get width, and get out $test.appendTo($this.parent()); var width = $test.width(); $test.remove(); // set select width $this.width(width + arrowWidth); // run on start }).change(); }); }; // run by default $("select.resizeselect").resizeselect(); })(jQuery, window);
<script src="ajax/libs/jquery/2.1.3/jquery.js"></script> <select class="resizeselect"> <option>All</option> <option>Longer</option> <option>A very very long string...</option> </select>
尝试以下简单的JavaScript，并将其转换为jQuery 🙂
<html><head><title>Auto size select</title> <script> var resized = false; function resizeSelect(selected) { if (resized) return; var sel = document.getElementById('select'); for (var i=0; i<sel.options.length; i++) { sel.options[i].title=sel.options[i].innerHTML; if (i!=sel.options.selectedIndex) sel.options[i].innerHTML=''; } resized = true; sel.blur(); } function restoreSelect() { if (!resized) return; var sel = document.getElementById('select'); for (var i=0; i<sel.options.length; i++) { sel.options[i].innerHTML=sel.options[i].title; } resized = false; } </script> </head> <body onload="resizeSelect(this.selectedItem)"> <select id="select" onchange="resizeSelect(this.selectedItem)" onblur="resizeSelect(this.selectedItem)" onfocus="restoreSelect()"> <option>text text</option> <option>text text text text text</option> <option>text text text </option> <option>text text text text </option> <option>text</option> <option>text text text text text text text text text</option> <option>text text</option> </select> </body></html>
这是一个jsfiddle它： https ://jsfiddle.net/sm4dnwuf/1/
基本上它是暂时删除未选中的元素，当它没有在焦点（造成它的大小只是选定的大小）。
这里还有一个简单的jQuery解决scheme：
$('#mySelect').change(function(){ var $selectList = $(this); var $selectedOption = $selectList.children('[value="' + this.value + '"]') .attr('selected', true); var selectedIndex = $selectedOption.index(); var $nonSelectedOptions = $selectList.children().not($selectedOption) .remove() .attr('selected', false); // Reset and calculate new fixed width having only selected option as a child $selectList.width('auto').width($selectList.width()); // Add options back and put selected option in the right place on the list $selectedOption.remove(); $selectList.append($nonSelectedOptions); if (selectedIndex >= $nonSelectedOptions.length) { $selectList.append($selectedOption); } else { $selectList.children().eq(selectedIndex).before($selectedOption); } });
你可以使用一个简单的函数：
// Function that helps to get the select element width. $.fn.getSelectWidth = function() { var width = Math.round($(this).wrap('<span></span>').width()); $(this).unwrap(); return width; }
然后在你的表单select元素上使用它：
$(this).getSelectWidth();
你也可以试试这个
select option{width:0; } select option:hover{width:auto;}
