更改每个活动选项的选择元素的宽度

Question

我有一个

select

元素直接位于输入上。大多数情况下看起来都很棒，但某些选项上有太多空白。看起来除非我自己设置一些静态宽度，否则

select

会扩展到其最大选项的宽度。

我想让选择选项只占据与当前显示选项一样多的宽度。我想问这是否可能，但我知道这是可能的，因为我在亚马逊主页的搜索栏上看到了它。控制搜索过滤器的

select

的行为本质上是我试图在我的网站上重新创建的行为，但我无法确切地弄清楚他们做了什么。这是重现我当前所掌握的基本思想的代码。

HTML：

<select>
  <option>All</option>
  <option>Consoles</option>
  <option>Games</option>
  <option>Equipment</option>
</select>
<input type="text" />

CSS：

select {
  -moz-appearance: none;
  -webkit-appearance: none;
  background-color: #f8f8f8;
  border: 1px solid #ccc;
  border-radius: 4px 0 0 4px;
  border-right: 0;
  box-sizing: border-box;
  height: 44px;
  padding: 10px;
  text-align: center;
  float: left;
}

input[type='text'] {
  height: 44px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 0 4px 4px 0;
  margin: 0;
  padding: 0 5px;
  font-size: 14px;
  min-width: 300px;
}

我也对这里的一切都摆弄。

我知道我可以使用 JavaScript 来使其工作，但在我看来，这绝对是最后的手段。如果可以的话，我想用纯 HTML 和 CSS 来实现。非常感谢任何帮助。

Answer 1

希望这正是您想要的东西。但由于

<select>

宽度需要计算或用其他值确定，因此需要一些 JavaScript。我使用纯 jQuery 并对 HTML 和 CSS 做了一些更改。

问题的答案是，您需要将所选选项附加到另一个选择选项以获取当前选项宽度并保留它，直到选择的下一次更改。

HTML：

<div id="main-div">
<select id="resized">
  <option value="All">All</option>
  <option value="Consoles">Consoles</option>
  <option value="Games">Games</option>
  <option value="Equipment">Equipment</option>
</select>
<input type="text" />
</div>

<!-- hidden select to calculate the selected option width -->

<select id="hidden_select">
  <option id="hidden_select_option"></option>
</select>

CSS：

select {
  -moz-appearance: none;
  -webkit-appearance: none;
  background-color: #f8f8f8;
  border: 1px solid #ccc;
  border-radius: 4px 0 0 4px;
  border-right: 0;
  box-sizing: border-box;
  height: 44px;
  padding: 10px;
  text-align: center;
  float: left;
}

input {
  height: 44px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 0 4px 4px 0;
  margin: 0;
  padding: 0 5px;
  font-size: 14px;
}

#main-div{
  display: none;
  width: 375px;
}

#hidden_select {
  display: none;
}

jQuery：

$(document).ready(function() {
        $('#resized').change();
    $("#main-div").css("display", "block");
});
 $('#resized').on("change", function(){
    $("#hidden_select_option").html($("#resized option:selected").text());
    $(this).width($("#hidden_select").width());

    //fix the input filed width
    var x = $("#main-div").width();
    var y = $(this).width() + 21;
    $("input").width((x-y) - 12);
 });

注意：值21和12是选择和输入的填充值和边框值。

工作代码：

https://jsfiddle.net/y82x60fa/10/

Answer 2

这是使用简单jquery的解决方案。 亚马逊首页也是用js或者其他脚本语言完成的。

 $('#resizingSelectTag').change(function(){
    $("#widthTempOption").html($('#resizingSelectTag option:selected').text());
    $(this).width($("#selectTagWidth").width()); 
 });

#resizingSelectTag {
 width: 50px;
}
  
#selectTagWidth{
 display : none;
} 
select {
  -moz-appearance: none;
  -webkit-appearance: none;
  background-color: #f8f8f8;
  border: 1px solid #ccc;
  border-radius: 4px 0 0 4px;
  border-right: 0;
  box-sizing: border-box;
  height: 44px;
  padding: 10px;
  text-align: center;
  float: left;
	position:absolute;
	border-right: 1px solid #ccc;
}

input[type='text'] {
  height: 44px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 0 4px 4px 0;
  margin: 0;
  padding: 0 5px;
  font-size: 14px;
  min-width: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="resizingSelectTag">
      <option>All</option>
       <option>Lorem Ipsum</option>
       <option>Lorem Ipsum is</option>
</select>

<select id="selectTagWidth">
       <option id="widthTempOption"></option>
</select>
<input type="text" />

Answer 3

这是一种纯 JavaScript（无 jQuery）方法，可与预先存在的 HTML 和 CSS 配合使用（无需额外的大小调整/测量元素）。

它会暂时删除

<option>

中的每个

<select>

（活动的除外），测量并冻结宽度，然后恢复选项。

function handleSelect(event) {
  console.log(`new value: ${event.target.value}`);
}

function resizeSelectElementToCurrentValue(select) {
  // remove each <option> except the current value
  const purgatory = [];
  for (let option of select.querySelectorAll('option')) {
    purgatory.push(option);
    if (option.getAttribute('value') != select.value) {
      select.removeChild(option);
    }
  }

  // allow the <select> to auto-size
  select.style.width = null;

  // copy that width to "freeze" it
  select.style.width = `${select.clientWidth}px`;

  // restore the <select>'s children
  select.innerText = '';
  for (let option of purgatory) {
    select.appendChild(option);
  }
}

// auto-size on startup, or as-needed
for (select of document.querySelectorAll('select')) {
  resizeSelectElementToCurrentValue(select);
}

<select onchange="resizeSelectElementToCurrentValue(this); handleSelect(event)">
  <option value="1">First option is moderate</option>
  <option value="2">Second option is a very very long one</option>
  <option value="3">Third = short</option>
</select>

<select onchange="resizeSelectElementToCurrentValue(this); handleSelect(event);">
  <option value="4">Short</option>
  <option value="5">Medium...</option>
  <option value="6">Loooooooooong</option>
</select>