jquery - 用户想要选择选项后如何扩展“选择”选项宽度

Question

也许这是一个简单的问题，也许不是。我有一个选择框，我在其中硬编码宽度。说 120 像素。

<select style="width: 120px">
  <option>REALLY LONG TEXT, REALLY LONG TEXT, REALLY LONG TEXT</option>
  <option>ABC</option>
</select>

我希望能够显示第二个选项，以便用户可以看到文本的完整长度。

像其他一切一样。这在 Firefox 中运行良好，但不适用于 Internet Explorer6。

score 13 · Accepted Answer

我用以下代码解决了我的问题：

<div style="width: 180px; overflow: hidden;">
   <select style="width: auto;" name="abc" id="10">
     <option value="-1">AAAAAAAAAAA</option>
     <option value="123">123</option>
   </select>
</div>

希望能帮助到你！

score 12 · Accepted Answer

如果您有一个预先存在的选项 fixed-with <select>，并且您不想以编程方式更改宽度，那么除非您有一点创意，否则您可能会不走运。

您可以尝试将title属性设置为每个选项。这是非标准的 HTML（如果您关心这里的这种轻微违规行为），但 IE（和 Firefox 也是如此）将在鼠标悬停时在鼠标弹出窗口中显示整个文本。
当用户选择某些内容时，您可以使用 JavaScript 在某个定位的 DIV 中显示文本。恕我直言，这是一种不太好的方法，因为它完全需要 JavaScript 才能工作，而且它只有在选择了某些内容之后才能工作 - 在值发生变化之前，选择框不会触发任何事件。
您根本不使用选择框，而是使用其他标记和 CSS 实现其功能。不是我最喜欢的，但我想提一下。

如果您稍后通过 JavaScript 添加长选项，请查看此处：如何在 IE 中动态更新 HTML“选择”框

score 5 · Accepted Answer

非常老的问题，但这是解决方案。在这里，您有一个使用jquery. 它利用了一个临时辅助select，从主选择中选择的选项被复制到其中，这样人们就可以评估主选择select应该具有的真实宽度。

$('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>ABC</option>
  <option>REALLY LONG TEXT, REALLY LONG TEXT, REALLY LONG TEXT</option>
</select>

score 4 · Accepted Answer

这模仿了您正在寻找的大多数行为：

  <!--

     I found this works fairly well.

  -->

  <!-- On page load, be sure that something else has focus. -->
  <body onload="document.getElementById('name').focus();">
  <input id=name type=text>

  <!-- This div is for demonstration only.  The parent container may be anything -->
  <div style="height:50; width:100px; border:1px solid red;">

  <!-- Note: static width, absolute position but no top or left specified, Z-Index +1 -->
  <select
   style="width:96px; position:absolute; z-index:+1;"
   onactivate="this.style.width='auto';"
   onchange="this.blur();"
   onblur="this.style.width='96px';">
  <!-- "activate" happens before all else and "width='auto'" expands per content -->
  <!-- Both making a selection and moving to another control should return static width -->

  <option>abc</option>
  <option>abcdefghij</option>
  <option>abcdefghijklmnop</option>
  <option>abcdefghijklmnopqrstuvwxyz</option>

  </select>

  </div>

  </body>

  </html>

这将覆盖一些按键行为。

score 4 · Accepted Answer

把它放在一个div中并给它一个id

<div id=myForm>

然后创建一个非常简单的 CSS 来搭配它。

#myForm select { 
width:200px; }

#myForm select:focus {
width:auto; }

这就是你所需要的。

score 4 · Accepted Answer

我通过在 select 中将 min-width 和 max-width 设置为相同的值，然后将 select:focus 设置为 auto，在我的引导页面中修复了它。

select {
  min-width: 120px;
  max-width: 120px;
}
select:focus {
  width: auto;
}

<select style="width: 120px">
  <option>REALLY LONG TEXT, REALLY LONG TEXT, REALLY LONG TEXT</option>
  <option>ABC</option>
</select>

score 2 · Accepted Answer

即使这个问题来自 2008 年，仍然存在您希望选择框匹配当前选择的宽度而不是最长选项的情况。因此，这是一种现代方法：

它或多或少与这个答案中的原理相同，只是没有 jQuery。

获取 select 元素并监听它的变化。
创建一个新的选择元素和选项，并将当前的文本传递selectedIndex给选项。
向新的选择元素添加position: fixed和样式。visibility: hidden这样可以确保它不会影响您的布局，但仍然可以测量其边界框。
将选项附加到选择。
将选择附加到原始选择元素。
使用获取该新尺寸所需的尺寸getBoundingClientRect().width
根据新的尺寸设置原始的宽度。
删除新的。
调度更改事件以最初触发此逻辑。

const select = document.querySelector('select')

select.addEventListener('change', (event) => {
  let tempSelect = document.createElement('select'),
      tempOption = document.createElement('option');

  tempOption.textContent = event.target.options[event.target.selectedIndex].text;
  tempSelect.style.cssText += `
      visibility: hidden;
      position: fixed;
      `;
  tempSelect.appendChild(tempOption);
  event.target.after(tempSelect);
  
  const tempSelectWidth = tempSelect.getBoundingClientRect().width;
  event.target.style.width = `${tempSelectWidth}px`;
  tempSelect.remove();
});

select.dispatchEvent(new Event('change'));

<select>
  <option>Short option</option>
  <option>Some longer option</option>
  <option>An very long option with a lot of text</option>
</select>

score 1 · Accepted Answer

好的，这个选项很老套，但应该可以。

$(document).ready( function() {
$('#select').change( function() {
    $('#hiddenDiv').html( $('#select').val() );
    $('#select').width( $('#hiddenDiv').width() );
 }
 }

这当然需要一个隐藏的div。

<div id="hiddenDiv" style="visibility:hidden"></div>

哦，你将需要 jQuery

score 1 · Accepted Answer

我在 IE 中用于现有网站的一个简单解决方案（使用 jQuery，但eventListener如果你真的不太了解 JS，我可以用代码回帖）如下：

if (jQuery.browser.msie) {
  jQuery('#mySelect').focus(function() {
    jQuery(this).width('auto');
  }).bind('blur change', function() {
    jQuery(this).width('100%');
  });
};

当然，使用变量 ( var cWidth = jQuery('#mySelect').width();) 来存储以前的宽度，但这就是我们的工作所需的一切。

score 1 · Accepted Answer

样本

function PopulateDropdown() {
    $.ajax({
        type: "POST",
        url: "../CommonWebService.asmx/GetData",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (msg) {
            $("select[id^='MyDropDown']").empty();
            $.each(msg.d, function () {
                $("select[id^='MyDropDownSelect']").append($("<option></option>").val(this['IdIndexDataType']).html(this['DataTypeName']));
            }); 
            $("select[id^='MyDropDown']").css("width", "auto");  
        },
        error: function (e1) {
            alert("Error - " + e1.toString());
        }
    });
}

下面的代码将通过在将数据插入下拉列表后添加此代码来解决您的下拉列表宽度问题。

$("select[id^='MyDropDown']").css("width", "auto");

score 0 · Accepted Answer

我改进了cychan的解决方案，就像这样：

<html>
<head>

<style>
    .wrapper{
        display: inline;
        float: left; 
        width: 180px; 
        overflow: hidden; 
    }
    .selectArrow{
        display: inline;
        float: left;
        width: 17px;
        height: 20px;
        border:1px solid #7f9db9;
        border-left: none;
        background: url('selectArrow.png') no-repeat 1px 1px;
    }
    .selectArrow-mousedown{background: url('selectArrow-mousedown.png') no-repeat 1px 1px;}
    .selectArrow-mouseover{background: url('selectArrow-mouseover.png') no-repeat 1px 1px;}
</style>
<script language="javascript" src="jquery-1.3.2.min.js"></script>

<script language="javascript">
    $(document).ready(function(){
        $('#w1').wrap("<div class='wrapper'></div>");
        $('.wrapper').after("<div class='selectArrow'/>");
        $('.wrapper').find('select').mousedown(function(){
            $(this).parent().next().addClass('selectArrow-mousedown').removeClass('selectArrow-mouseover');
        }).
        mouseup(function(){
            $(this).parent().next().removeClass('selectArrow-mousedown').addClass('selectArrow-mouseover');
        }).
        hover(function(){
            $(this).parent().next().addClass('selectArrow-mouseover');
        }, function(){
            $(this).parent().next().removeClass('selectArrow-mouseover');
        });

        $('.selectArrow').click(function(){
            $(this).prev().find('select').focus();
        });

        $('.selectArrow').mousedown(function(){
            $(this).addClass('selectArrow-mousedown').removeClass('selectArrow-mouseover');
        }).
        mouseup(function(){
            $(this).removeClass('selectArrow-mousedown').addClass('selectArrow-mouseover');
        }).
        hover(function(){
            $(this).addClass('selectArrow-mouseover');
        }, function(){
            $(this).removeClass('selectArrow-mouseover');
        });
    });

</script>
</head>
<body>
    <select id="w1">
       <option value="0">AnyAnyAnyAnyAnyAnyAny</option>
       <option value="1">AnyAnyAnyAnyAnyAnyAnyAnyAnyAnyAnyAnyAnyAny</option>
    </select>

</body>
</html>

在 css 类中使用的 PNG 在这里上传...

而且你仍然需要 JQuery .....

score 0 · Accepted Answer

您可以尝试仅使用 css 解决。通过添加类来选择

select{ width:80px;text-overflow:'...';-ms-text-overflow:ellipsis;position:absolute; z-index:+1;}
select:focus{ width:100%;}

有关特定项目（选项）HTML 中的更多参考列表框样式

多选列表框

score 0 · Accepted Answer

我基于data 属性和隐藏的 CSS 伪元素创建了带有自动扩展的样式选择元素，只有一个最小的 JS 。

Array.from(document.querySelectorAll('.js-select-auto-expand'), (input) => {
  let parent = input.parentNode;
  
  function updateSize() {
    parent.dataset.selectAutoExpand = input.value
  }
  
  input.addEventListener('input', updateSize);
  
  updateSize();
});

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  padding: 2rem 4rem;
  line-height: 1.5;
  color: gray;
}

.article-test {
  line-height: 2.5;
}

.select-auto-expand {
  position: relative;
  display: inline-block;
  min-width: 2rem;
  width: auto;
  height: 30px;
  line-height: 28px;
  padding: 0 10px;
  vertical-align: baseline;
  border: 1px solid black;
  background-color: transparent;
  color: #fafafa;
  font-size: 1rem;
}
.select-auto-expand .select-auto-expand__select {
  position: absolute;
  top: 0px;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  min-width: 1em;
  height: 100%;
  margin: 0 2px;
  padding: 0 8px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 0;
  border: 0;
  background: transparent;
  font: inherit;
}
.select-auto-expand::after {
  content: attr(data-select-auto-expand);
  display: inline-block;
  width: 100%;
  min-width: 1em;
  white-space: pre-wrap;
  font: inherit;
  line-height: inherit;
  color: inherit;
  background: transparent;
  visibility: hidden;
  opacity: 0;
}
.select-auto-expand:focus-within {
  outline: 3px solid rgba(0, 0, 255, 0.3);
}
.select-auto-expand:focus-within input:focus {
  outline: none;
}

<form action="#" class="article-test">

  <p>
    Adipisci ipsum debitis quaerat commodi tenetur? Amet consectetur adipisicing elit. Lorem ipsum dolor sit, 
    <label class="select-auto-expand" for="pet-select">
      <select name="pets" id="pet-select" class="select-auto-expand__select js-select-auto-expand">
        <option value="select ...">select ...</option>
        <option value="sed qui">sed qui</option>
        <option value="veniam iste quis">veniam iste quis</option>
        <option value="ipsum debitis">ipsum debitis</option>
        <option value="officia excepturi repellendus aperiam">officia excepturi repellendus aperiam</option>
      </select>
    </label>
    veniam iste quis, sed qui non dolores. Porro, soluta. Officia excepturi repellendus aperiam cumque consectetur distinctio, veniam iste quis, sed qui non dolores. Adipisci ipsum debitis quaerat commodi tenetur?
  </p>

</form>

演示： https ://codepen.io/astro87/pen/dyZerdg?editors=0010

灵感来源： https ://filamentgroup.github.io/select-css/demo/ https://codepen.io/shshaw/full/bGNJJBE

jquery - 用户想要选择选项后如何扩展“选择”选项宽度

13 回答 13

Related

Reference