1. ホーム
  2. javascript

[解決済み] Javascriptを使用して、複数選択ボックスでCtrl-Clickが必要ないようにするにはどうすればよいですか?

2023-05-28 16:30:13

質問

簡単なハックだと思ったのですが、今何時間も検索しているのですが、正しい検索語が見当たりません。私は普通の複数のセレクトボックス( <select multiple="multiple"> ) を持ちたいのですが、ユーザーが複数の選択をするためにコントロール キーを押し続ける必要がないようにしたいのです。

言い換えれば、私は左クリックで <option> 要素を左クリックすると、他の要素を変更せずにカーソルの下にある 要素を切り替えることができます。言い換えれば、コンボリストボックスのように見えるが、チェックボックスのグループのように動作するものが欲しいのです。

どなたか、Javascript でこれを行う簡単な方法を提案していただけませんか?ありがとうございます。

どのように解決するのですか?

このフィドルを見てください。 http://jsfiddle.net/xQqbR/1022/

基本的には mousedown イベントをオーバーライドする必要があります。 <option> をトグルし selected のプロパティを切り替える。

$('option').mousedown(function(e) {
    e.preventDefault();
    $(this).prop('selected', !$(this).prop('selected'));
    return false;
});

わかりやすくするために、上のセレクタには「option」を指定しました。これを微調整して <option>s の下にある特定の <select> 要素の下に置く。例えば $('#mymultiselect option')