前提・実現したいこと

ここに質問の内容を詳しく書いてください。
長くなってしまったタイトルの通りですが、複数選択リストでCTRLキーを使わなくても複数選択できるようにした際、リストの表示位置を選択した場所に固定したいと考えています。

発生している問題・エラーメッセージ

下記のjQueryコードで、複数選択リストでCTRLキーを使わなくても複数選択できるようにはなったのですが、リストをスクロールして下の方のリストを選択すると、必ずリストの表示位置が先頭に戻ってしまいます。

下記のjQueryコードをコメントアウトすると、通常通りの動きになってCTRLキーが必要になりますが、選択してもリストの表示位置は変わりません。

該当のソースコード

HTML
1<select id="multi" class="form-control" name="dummy" multiple="multiple" >
2    <option value="1">1</option>
3    ...
4    <option value="100">100</option>
5</select>

jQuery
1$(document).on ('mousedown', "#multi option", (event) => {
2    event.preventDefault();
3
4    $(event.currentTarget).toggleClass ('selected');
5    $(event.currentTarget).prop ('selected',
6        !$(event.currentTarget).prop ('selected'));
7    return false;
8});

試したこと

「 $(event.currentTarget).focus();」として、イベント発生源となったオプションをフォーカスしてみましたが、変化はありませんでした。
CTRLキー無しで選択後に、元のリストの位置に留めておく方法をご存じな方がいらっしゃったら、ご協力いただけませんでしょうか。

補足情報（FW/ツールのバージョンなど）

jQuery 3.4.1
chrome 98.0.4758.102

行動規範の内容に同意します

回答1件

ベストアンサー

multipleなselectでctrlをつかわないとなると何かを諦める必要があります
select風なチェックボックスにするなど工夫してみてください

置き換え例

HTML
1<style>
2.select {
3display:flex;
4flex-direction : column;
5padding:0;
6height:5em;
7overflow-y:scroll;
8width:100px;
9border:1px solid gray;
10}
11.select [type=checkbox] ~ span{
12display:inline-block;
13}
14.select [type=checkbox]:checked ~ span{
15background-Color:red;
16}
17.select [type=checkbox]{
18display:none;
19}
20.select span{
21font-size:0.8em;
22list-style:none;
23width:100%;
24}
25li{height:1em;}
26</style>
27<form>
28<select name="ch[]" multiple>
29<option value="1">1</option>
30<option value="2">2</option>
31<option value="3">3</option>
32<option value="4">4</option>
33<option value="5">5</option>
34<option value="6">6</option>
35</select>
36<input type="submit" value="send">
37</form>
38<form>
39<ul class="select">
40<li><label><input type="checkbox" name="ch[]" value="1"><span>1</span></label>
41<li><label><input type="checkbox" name="ch[]" value="2"><span>2</span></label>
42<li><label><input type="checkbox" name="ch[]" value="3"><span>3</span></label>
43<li><label><input type="checkbox" name="ch[]" value="4"><span>4</span></label>
44<li><label><input type="checkbox" name="ch[]" value="5"><span>5</span></label>
45<li><label><input type="checkbox" name="ch[]" value="6"><span>6</span></label>
46</ul>
47<input type="submit" value="send">
48</form>
49