カーソルを合わせるとselect内のoptionを自動で開く仕組みを作りたい。

Question

カーソルを合わせるとselect内のoptionを自動で開く仕組みを作りたいのですが、上手くいきません。
私がイメージしているコードを載せます。
関数open, closeをどのようにすればよいか、解決策があればご教授願います。

    <select onmouseover="open()" onmouseleave="close()">
        <option>1</option>
        <option>2</option>
    </select>
    <script>
       function open(){

       }
       function close(){
           
       }
    </script>

Comments

[m.ts10806]

用途は何でしょう。
アコーディオンみたいなものならともかく入力コントロールを自動開閉するのってかなりユーザビリティ低いように思うのですが。

[canal]

あるゲームのキャラクターの検索ツールを作りたいです。
能力の種類がたくさんあって、その分入力項目が増えるので、なるべくクリック回数を減らしたいです。

Answer 1

selectタグの開閉はjsで制御できないみたいですね
どうしてもやりたいなら疑似的なselect要素をつくって処理するとよいと思いますが
その処理がユーザービリティが低いから方法が用意されていないのだと思うと
実装は微妙ですね

Answer 2

CSSのみでそれっぽく見せるコトは可能です。

<div class="wrap">
  <p>選択してください</p>
  <select size="2">
    <option>1</option>
    <option>2</option>
  </select>
</div>

select{
  display: none;
}
.wrap:hover select{
  display: block;
}

どうしてもJSで操作したければ、ややこしくなりますが上記の形の感じでCSS操作すれば一応出来ます。