根据所选OPTION的宽度自动调整SELECT元素的大小

2021/01/03 12:31 · jquery ·  · 0评论

我拥有select不同的元素option通常,该select元素将从最大的option元素获得其宽度,但我希望该select元素具有默认option值的宽度,该宽度较短。当用户选择另一个时optionselect元素应调整自身大小,以便整个文本始终在元素中可见。

$(document).ready(function() {
    $('select').change(function(){
        $(this).width($('select option:selected').width());
    });
});

问题:

  • 在Chrome(Canary)上,宽度总是返回0。
  • 在Firefox上,宽度的添加是添加的,但选择较短的选项时不会调整大小。
  • Safari:与Chrome的结果相同。

演示@ JSFiddle

您是对的,没有简单或内置的方法来获取特定选择选项的大小。这是一个JsFiddle,它可以满足您的需求。

的最新版本还可以Chrome, Firefox, IE, Opera and 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>

这是我为这个问题写的一个插件,可以动态创建和销毁一个模拟程序,span因此不会使您的html变得混乱。这有助于分离问题,让您委派该功能,并允许在多个元素之间轻松地重用。

在任何地方包括此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);

您可以通过以下两种方式之一来初始化插件:

  1. HTML-将类添加.resizeselect到任何选择元素:

    <select class="btn btn-select resizeselect">
      <option>All</option>
      <option>Longer</option>
      <option>A very very long string...</option>
    </select>
    
  2. JavaScript-调用.resizeselect()任何jQuery对象:

    $("select").resizeselect()
    

这是jsFiddle中演示

这是堆栈片段中的演示:

已更新,包括了GarywooEric Warnke的尺码建议

这里的工作解决方案利用了一种临时辅助工具select,将从主选择中选择的选项克隆到其中,以便可以评估主工具select应具有的真实宽度

这里的好处是,您只需添加此代码即可,它适用于每个选择,因此无需ids额外的命名。

$('select').change(function(){
  var text = $(this).find('option:selected').text()
  var $aux = $('<select/>').append($('<option/>').text(text))
  $(this).after($aux)
  $(this).width($aux.width())
  $aux.remove()
}).change()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
  <option>REALLY LONG TEXT, REALLY LONG TEXT, REALLY LONG TEXT</option>
  <option>ABCDEFGHIJKL</option>
  <option>ABC</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/

基本上,它的作用是在焦点不清晰时临时删除未选择的元素(使它的大小恰好等于选定的大小)。

您可以使用一个简单的函数:

// 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;
}

然后在表单选择元素上使用它:

$(this).getSelectWidth();

这是另一个普通的jQuery解决方案:

$('#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);
    }
});

这是我实现以下行为的方式:

  1. 加载文档时:所选内容的宽度已经基于所选选项的宽度(不会重新绘制)。

  2. 更改时:选择的宽度将更新为新选择的选项的宽度。

/* WIDTH, ADJUSTMENT, CONTENT BASED */
$( document ).on( 'change', '.width-content-based', function(){
	let text_modified_font;
	let text_modified_string;
	let descendants_emptied_elements;
	
	text_modified_font =
		$( this ).css( 'font-weight' ) + ' ' + $( this ).css( 'font-size' ) + ' ' + $( this ).css( 'font-family' );
	
	if
	(
		$( this ).is( 'select' )
	)
	{
		text_modified_string =
			$( this ).find( ':selected' ).text();
		
		descendants_emptied_elements =
			$( this ).find( '[data-text]' );
	}
	
	else
	{
		text_modified_string =
			$( this ).val();
	}
	
	$( this ).css( { 'width': text_width_estimate( text_modified_string, text_modified_font ) + 'px' } );
	
	if
	(
		descendants_emptied_elements.length
	)
	{
		descendants_emptied_elements.each( function(){
			$( this ).text( $( this ).attr( 'data-text' ) ).removeAttr( 'data-text' );
		});
	}
});

/* DOCUMENT, ON READY */
$( document ).ready( function(){
	
	$( '.width-content-based' ).trigger( 'change' );
	
});

/* TEXT WIDTH ESTIMATE */ function text_width_estimate( text, font ) { let canvas = text_width_estimate.canvas || ( text_width_estimate.canvas = document.createElement( 'canvas' ) ); let context = canvas.getContext( '2d' ); context.font = font; let metrics = context.measureText( text ); return metrics.width + 3; }
select { -webkit-appearance: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select class="width-content-based">
	<option value="AF" data-text="Afghanistan"></option>
	<option value="AX" data-text="Åland Islands"></option>
	<option value="AL" selected>Albania</option>
</select>

您也可以尝试

select option{width:0; }
select option:hover{width:auto;}
本文地址:http://jquery.askforanswer.com/genjusuoxuanoptiondekuanduzidongdiaozhengselectyuansudedaxiao.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!