WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:セレクトボックスでCtrl、Shiftキーを使用しないで複数選択する方法はありますか?

0:[投稿] Ryu [2003/03/17 11:37 ][環境:IE5.5,Win2000 わからない]

初めて質問させていただきます。
セレクトボックスで以下の様に設定すると複数選択が可能と
なりますが、このままではCtrl、Shiftキーを押しながら選択
しないと元々選択してあった項目が選択解除されてしまいます。

<select size="3" name="select_test" multiple>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

JavaScriptを使用してマウスのクリックのみで複数選択が可能となる方法はありますでしょうか?また元々選択されていた項目を再度クリックすると選択解除される、ということも可能でしょうか?
皆様のお知恵をお借りしたく質問させていただきます。
よろしくお願いいたします。


1:[回答] chintara [2003/03/17 18:14 ]

サンプルを作ってみました(IE6でしか動作確認していません)。
参考になれば幸いです。

<script>
function getOptionArray(count) {
   var arr = new Array(count);
   for (var i = 0; i < count; i++) {
       arr[i] = false;
   }
   return arr;
}

function selectOption(arr, offset) {
   var selectBorderSize = 5;
   var optionHeight = 14;

   var y = event.y - offset - selectBorderSize;
   for (var i = 0; i < arr.length; i++) {
       if (y >= optionHeight * i && y <= optionHeight * (i + 1) - 1) {
           arr[i] = !arr[i];
       }
       document.myForm.select_test.options[i].selected = arr[i];
   }
}

var optionCount = 3;
var optionArray = getOptionArray(optionCount);
</script>

<form name="myForm">

<select size="3" name="select_test" multiple onclick="selectOption(optionArray, this.offsetTop);">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

</form>


2:[回答] Ryu [2003/03/17 19:19 ]

ご回答いただきまして誠にありがとうございます。
早速試させていただきましたところ、不具合が出てしまいました。
起動後に「2」をクリックすると「3」も選択状態になってしまう等です。
自身でソースを解析して変更してみようと思ったのですが、
なにぶん未熟なため、解析できませんでした。
そこで何度もお手数をおかけいたしまして申し訳ありませんが、
selectOptionの中身の処理を詳しく教えていただけませんでしょうか?
なにとぞよろしくお願いいたします。


3:[回答] chintara [2003/03/17 21:13 ]

ざっくり言うと、クリック時のy座標からオフセット値を引いて、
どのオプションがクリックされたか判断し、それを反転させる、
というフローです。

selectBorderSizeとoptionHeightを調整すればどうにかなるかな〜と思いますが、
他のやり方を考えたほうが早いかもしれません。すみません。


4:[完了] Ryu [2003/03/17 21:32 ]

おっしゃる通りselectBorderSizeとoptionHeightを調整したら
うまくいきました。大変助かりました。
ありがとうございました。

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World