- PR -

選択最大数を限定したselectボックス(HTML)

1
投稿者投稿内容
ほまらら
ベテラン
会議室デビュー日: 2005/10/19
投稿数: 54
投稿日時: 2006-04-03 14:01
お世話になります。
HTMLの技術に関してご助言願いたいのですが、
現在、複数選択可能なselectボックスを配置しようとしています。
それで、複数選択だけであればmultiple属性を設定すればいいのですが、数に際限なく選択されるのも困る、という状況です。
コード:
<select multiple="multiple">
	<option value="a">A</option>
	<option value="b">B</option>
	<option value="c">C</option>
<select>

上のような例で言えば、2個までは選択可能で、3個は困る、というような感じです。
どうにも実現方法が判らず困っています。
ご存知の方、宜しくお願いします。
n.w
大ベテラン
会議室デビュー日: 2003/07/15
投稿数: 126
お住まい・勤務地: 神奈川
投稿日時: 2006-04-03 14:27
方法としてはいくつかあると思いますが
選択リスト内でクリックなどのイベントや
送信ボタンなどがあればその際にJavascriptのメソッドを起動し
アラートなどで”選択可能なデータは２つまでです”として選択された
OPTIONを解除するなどはいかがでしょう？

かなりざっくりとですが以下のようにして※①の個所に
どのようにしてとめるかを記述する
(最後に選択されたものを解除、メッセージを出し、処理を進めなく
するなど）

コード:

<script>

   function MultiSelect(){

        var s;

        var obj = frm.hoge.options;

        var getIdx = new Array();

    

        for(i = 0, n = 0; i < obj.length; i++ ) {

            if( obj[i].selected ) {

                getIdx[n++] = i;

            }

        }

        if( getIdx.length > 0 ) {

            s = getIdx.length + 1;

        } 

        

        if( 3 <= s ) {

          alert("選択可能数は２です");

          // ※①

        }

    }

</script>

<html>

<head><title></title></head>

<body>

<form name="frm">

<SELECT name="hoge" onClick="MultiSelect()" multiple>	

	<OPTION value="1">data1</OPTION>	

	<OPTION value="2">data2</OPTION>	

	<OPTION value="3">data3</OPTION>

</SELECT>

</form>

</body>

</html>


参考元


[ メッセージ編集済み 編集者: n.w 編集日時 2006-04-03 14:29 ]
じゃんぬねっと
ぬし
会議室デビュー日: 2004/12/22
投稿数: 7811
お住まい・勤務地: 愛知県名古屋市
投稿日時: 2006-04-03 14:28
引用:

ほまららさんの書き込み (2006-04-03 14:01) より:

上のような例で言えば、2個までは選択可能で、3個は困る、というような感じです。
どうにも実現方法が判らず困っています。

クライアント スクリプトであれば、select 内の option 要素をすべて舐めて、
selected の数をカウントし、onkeydown なんかで selected = false; にするとか。
(多分ちらつくでしょう)

どのみちサーバ側でチェックする必要があるので、
Post 時にチェックしてエラーにしてしまえば良いような気がしますけどね。
まあ、それは HTML の範疇外になりますけど。

_________________
C# と VB.NET の入門サイト
じゃんぬねっと日誌
ほまらら
ベテラン
会議室デビュー日: 2005/10/19
投稿数: 54
投稿日時: 2006-04-03 16:02
n.wさん、じゃんぬねっとさん、御返答ありがとうございます。

教えていただいた方法で、うまく実装できそうです。
なるほど、selectばかりに目が行ってしまっていましたが、optionの方でselectedをカウントするという手段がありましたか。
選択をスムーズにしたいので、ローテート式に古い選択を解除していく、という方法も考えられそうですね。（ブラウザの方で実装してほしい機能です）

ご教授ありがとうございました。
1

スキルアップ／キャリアアップ（JOB@IT）