クリックすると複数の選択ボックスを展開する方法

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

をすることによって達成することができるならば、それは、スクロールバーとドロップダウンとして拡大したいです：

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

上記のスニペットを実行してみてください、それはあなたが探していたものですかどうかを確認。

Answer 3

これは、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(); 
    }); 
});