selectボックスで選択数を制限したい

質問

入力画面を作成しています。
この画面に、複数選択可能なselectボックスを配置したいと思っています。
この時、選択できる個数を制限したいのですがどのようにすればよいでしょうか？

<select multiple size="3" name="test">
　　<option value="" selected></option>
　　<option value="1">A</option>
　　<option value="2">B</option>
　　<option value="3">C</option>
　　<option value="4">D</option>
　　<option value="5">E</option>
<select>

初期値が「""」となっており、selectボックスで何も選択せずに登録することも可能で、
何か選択された時は、最大3つまでしか選択できないようしたいと思っております。
そして、最大3つまでしか選べようにした上で、その3つの中に初期値の「""」が含まれていた場合はメッセージを表示させる。

以上の事をやりたいのですが、どのようにすれば良いでしょうか？
助けてください。よろしくお願いします。

回答No.1

wp_ · ベストアンサー

<form id="f1" action="next.cgi" method="POST">
　<select id='field1' size=7 multiple>
　　<option value=''></option>
　　<option value=1>1</option>
　　<option value=2>2</option>
　　<option value=3>3</option>
　　<option value=4>4</option>
　　<option value=5>5</option>
　</select>
　<input type='button' value='go' onclick='on()' />
</form>

<script type='text/javascript'><!--
function on()
{
　var field1 = document.getElementById('field1');
　var selectedCount = 0;

　// 選択されている個数を取得
　for(ii=0;ii<field1.options.length;ii++) {
　　if(field1.options[ii].selected) {
　　　selectedCount++;
　　}
　}

　// 0番目選択の検査
　if(field1.options[0].selected) {
　　alert('0番目が選択されちょる');
　　return false;
　}

　// 3個以上選択の検査
　if(selectedCount > 3) {
　　alert('3個以上選択されちょる');
　　return false;
　}

　// 正常処理
　document.getElementById('f1').submit();
}
// --></script>

こんな感じかな。
selectタグで4つめを選択した瞬間にアラートを出すのは難しいです。
何かしらの方法はあるかもしれませんが。

お礼

wp_様
ご回答ありがとうございます。

連絡が遅くなってしまいましたが、教えていただいた方法で見事実現できました。
ありがとうございました。

回答No.2

yambejp

>その3つの中に初期値の「""」が含まれていた場合はメッセージを表示させる

""のデータはほかの何かを選んだ時にチェックからはずしてはどうですか？
とりあえずこんな感じで

<script>
array1=new Array();
function check(obj){
var array2=new Array();
var count=0;
var opt=obj.options;
for(var i=0;i<opt.length;i++){
if(opt[i].selected) count++
array2[i]=opt[i].selected;
}

if(count==0) opt[0].selected=true;

if(count>1 && opt[0].selected){
opt[0].selected=false;
count--;
}
if(count>3){
for(var i in array1){
opt[i].selected=array1[i];
}
alert("3つまで!")
return false;
}
array1=array2;

}

</script>

<form>
<select multiple size="6" name="test" onChange="check(this)">
<option value="" selected>選択して</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
<option value="5">E</option>
</select>
</form>

こういうものはチェックボックスで処理した方が楽だしきれいだと
思いますよ

お礼

yambejp様
ご回答ありがとうございます。

連絡が遅くなってしまいましたが、無事やりたい事が実現できました。
＞""のデータはほかの何かを選んだ時にチェックからはずしてはどうですか？
このご意見は大変参考になりました。

＞こういうものはチェックボックスで処理した方が楽だしきれいだと
＞思いますよ
確かに、yambejp様のおっしゃるとおり、チェックボックスの方が簡単に実現できたのですが、
selectボックスの値が動的に変わってしまうので、チェックボックスにできませんでした。
でも、今回は皆様のおかげで見事実現できました。
ありがとうございました。