Question

是否可以通过以下方式让多个选择框的行为类似于选择框：仅显示选择框（1行）并在单击时展开？

<select multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

但我只希望在点击之前看到空的1行选择框，然后在需要时将其展开为带滚动条的下拉列表

Answer 1

我希望CSS足以解决您的问题。尝试这样的事情。

select{height:20px}
select:focus{height:auto}

    <select multiple>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select>

Answer 2

这使用jQuery在非常基本的层面上完成了你正在寻找的东西。除第一个选项外，所有选项最初都使用CSS隐藏。使用jQuery，一旦单击第一个选项，将显示其余选项。

工作示例：https://jsfiddle.net/byronj/fmvufoxz/4/

**HTML:** 

<select multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

**CSS:**

select option {
   display: none;
}

select option:first-of-type, .show {
  display: block;
}


**jQuery:**

jQuery(document).ready(function ($) {
    $('option').on( "click", function() {
       $('option').show();
    });
});

Answer 3

我相信你要做的事情可以通过以下方式完成：

＆＃13;

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

＆＃13;

尝试运行上面的代码段，看看它是否是您要找的内容。

希望有所帮助！

如何在单击时展开html多选框

3 个答案: