• 締切済み

セレクトボックスの組み合わせを制限する

６つあるイメージの中から４回選択するものです。さらにこの選択に以下の条件をつけたいのですが。 ・４回選択する中で、イメージ１～３の中から２個 イメージ４～６の中から２個しか選択できない。 というものなのですが、javascriptでこういった条件を指定できるのでしょうか？ <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <!--1つめ--> <FORM name="myform"> <SELECT name="imgselect" > <OPTION>イメージ1 <OPTION>イメージ2 <OPTION>イメージ3 <OPTION>イメージ4 <OPTION>イメージ5 <OPTION>イメージ6 </SELECT> <!--2つめ--> <SELECT name="imgselect2" > <OPTION>イメージ1 <OPTION>イメージ2 <OPTION>イメージ3 <OPTION>イメージ4 <OPTION>イメージ5 <OPTION>イメージ6 </SELECT> <!--3つめ--> <SELECT name="imgselect3" > <OPTION>イメージ1 <OPTION>イメージ2 <OPTION>イメージ3 <OPTION>イメージ4 <OPTION>イメージ5 <OPTION>イメージ6 </SELECT> <!--4つめ--> <SELECT name="imgselect4" > <OPTION>イメージ1 <OPTION>イメージ2 <OPTION>イメージ3 <OPTION>イメージ4 <OPTION>イメージ5 <OPTION>イメージ6 </SELECT> </FORM> </BODY> </HTML>

みんなの回答

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.9

#8>フォームにて実際送信する値を”イメージ１”などのセレクトボックス内の文字を送信することは出来るのでしょうか？ それは、もちろんできます。 ただ、その場合、別に対応表を作る必要があると思います。 SELECT で選んだ画像が表示されるということなので、 SELECT のvalue で画像名を持つのが素直だと思います(もう１ステップ増えてしまうから) 'img01' が 'イメージ１' になったところでたいして違いはないように思います。

teratera6
質問者

補足

＞SELECT のvalue で画像名を持つのが素直だと思います(もう１ステップ増えてしまうから) サンプルとして挙げた例が悪かったと思うのですが、実際このスクリプトを使用する際は、 <option value="img1">あいうえお</option> の様に、イメージとは全く違う言葉を用いなければなりません。そして、その言葉が送信しなければならない値となってくるのです。ややこしくてすいません。

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.8

修正してみました ---------------------------------------------------------------- <HTML> <HEAD> <TITLE></TITLE> <script type="text/javascript"><!-- var imgs = Array(); imgs["test"] = new Image(); imgs["test"].src ="test.jpg"; for(var i=1;i<=6;i++){ imgs["img0"+i] = new Image(); imgs["img0"+i].src ="img0"+i+".jpg"; } function restrict(s){ var f = s.form; var selectList = f.imgselect1.value + f.imgselect2.value + f.imgselect3.value + f.imgselect4.value;//現在選択されているリスト var sno = s.name.match(/\d$/)[0]; document.getElementById("myimg" + sno).src = imgs[s.value].src; //group1 の処理 var matches = selectList.match(/img01|img02|img03/g); if(matches && matches.length == 2){ for(var i=1;i<=4;i++){ //リストから削除する remove(f["imgselect" + i], "img01"); remove(f["imgselect" + i], "img02"); remove(f["imgselect" + i], "img03"); } } //group2 の処理 matches = selectList.match(/img4|img5|img6/g); if(matches && matches.length == 2){ for(var i=1;i<=4;i++){ remove(f["imgselect" + i], "img04"); remove(f["imgselect" + i], "img05"); remove(f["imgselect" + i], "img06"); } } } function remove(s, value){ //SELECT LIST から自分自身がvalue でない時 value を持つOPTION を削除する var len = s.length; if(value == "") return; for(var i=0;i<len;i++){ if(s.value != value && s.options[i].value == value){ s.remove(i); break; } } } function listReset(f){ for(var i=1;i<=4;i++){ document.getElementById("myimg" + i).src = imgs["test"].src; var s = f["imgselect" + i]; s.length = 0; s.options[0]=new Option("---選択---","test"); s.options[1]=new Option("イメージ1","img01"); s.options[2]=new Option("イメージ2","img02"); s.options[3]=new Option("イメージ3","img03"); s.options[4]=new Option("イメージ4","img04"); s.options[5]=new Option("イメージ5","img05"); s.options[6]=new Option("イメージ6","img06"); } } //--> </script> </HEAD> <BODY> <FORM name="myform"> <script type="text/javascript"><!-- for(var i=1;i<=4;i++){ document.writeln('<table>'); document.writeln('<tr>'); document.writeln('<td><SELECT name="imgselect'+i+'" onchange="restrict(this)"></SELECT></td>'); document.writeln('<td><IMG src="test.jpg" id="myimg'+i+'" border=0></td>'); document.writeln('</tr>'); document.writeln('</table>'); } //--> </script> <button type="button" onclick="listReset(this.form)">リセット</button> </FORM> <script type="text/javascript"><!-- listReset(document.myform); //--> </script> </BODY> </HTML>

teratera6
質問者

お礼

返信が遅くなり申し訳ありません。 たびたびのご回答ありがとうございます。 まさしく思惑通りの形で動作するのですが、他に回答して頂いた例にも返信しました様に、やはりこのタイプでもoptionのvalueが画像のファイル名になっている為に、セレクトボックスに表示される値自体を送信することが出来ません。この場合において、フォームにて実際送信する値を”イメージ１”などのセレクトボックス内の文字を送信することは出来るのでしょうか？

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.7

#3>（この質問をした時につけた条件を除いて）毎回選択肢はイメージ１～６まで表示させたいのです。 そうですね、勝手にそのような仕様にしました。 そのようにする修正は、簡単なので自分でもできると思いますが 一応伺いたいのですが、 [イメージ１][イメージ１] というように同じものを選ぶ場合もあるということですか？ そして、その場合も１～３の内２つが選択されたとするということですか？ または、 同じように思っていましたが、imgselect1のイメージ１ とimgselect2 のイメージ１は、違う画像であるということでしょうか？ （＃２の補足からは同じ画像のようですが）

teratera6
質問者

補足

>[イメージ１][イメージ１]というように同じものを選ぶ場合もあるということですか？ まさしくそうです。そして、 imgselect1のイメージ１ とimgselect2 のイメージ１は同じ画像です。 なんだかごちゃごちゃしてますが、、

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.6

共通部分をきりつめるとこんな感じで。 <head> <script language="javascript"> function changeImage(obj,num){ var count1=0; var count2=0; var f=obj.form; for(var i=0;i<f.length;i++){ if(f[i].type=="select-one"){ t=f[i].options[f[i].selectedIndex].text; }else{ t=""; } if(t=="イメージ1" || t=="イメージ2" || t=="イメージ3") count1++; if(t=="イメージ4" || t=="イメージ5" || t=="イメージ6") count2++; } if(count1>2){ alert("イメージ1～3はもう選べません") document.images['myimg'+num].src="test.jpg" obj.selectedIndex=0; }else if(count2>2){ alert("イメージ4～6はもう選べません") document.images['myimg'+num].src="test.jpg" obj.selectedIndex=0; }else{ document.images['myimg'+num].src=obj.value } } function tableview(){ max=4; for(var i=0;i<max;i++){ document.write("<tr><td>"); document.write("<select name='imgselect"+i+"' onChange='changeImage(this,"+i+")'>"); document.write("<option value='test.jpg'>＝＝＝＝＝"); for (var j=1;j<=6;j++){ document.write("<option value='img"+j+".jpg'>イメージ"+j); } document.write("</select>"); document.write("</td><td>"); document.write("<img src='test.jpg' name='myimg"+i+"' border=0>"); document.write("</td></tr>"); } } </script> </head> <body> <form name="myform"> <table border> <script language="javascript"> tableview() </script> </table> </form> </body>

teratera6
質問者

お礼

返信が遅くなり申し訳ありません。 凄いです。こういった方法があるのですね。完璧に動作しました。 ありがとうございます。非常に勉強になります。 実際はこのサンプルよりもかなり項目が多いので、非常に助かります。ただ一つ気になったのは、 このフォームを送信した場合、valueがimgー.jpgとなっているので、 送信される値もimgー.jpgとなってしまいますよね？これを、セレクトボックスに表示される”イメージ１”や”イメージ２”等を送信する値にすることは出来ないのでしょうか？

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.5

＃３で if(matches && matches.length == 2){ を if(matches.length == 2){ に修正して下さい。 (消し忘れです。そのままでも大丈夫ではありますが・）

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.4

#3で if(matches && matches.length == 2){ を if(matches.length == 2){ に修正して下さい。 (消し忘れです。そのままでも大丈夫ではありますが・）

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.3

一応サンプルを作ってみました、 ---------------------------------------------------------------- <HTML> <HEAD> <TITLE></TITLE> <script type="text/javascript"><!-- var group1 = Array(); var group2 = Array(); group1["img1"]=1;group1[1]="img1"; group1["img2"]=2;group1[2]="img2"; group1["img3"]=4;group1[4]="img3"; group2["img4"]=1;group2[1]="img4"; group2["img5"]=2;group2[2]="img5"; group2["img6"]=4;group2[4]="img6"; function restrict(s){ var f = s.form; var selectList = f.imgselect1.value + f.imgselect2.value + f.imgselect3.value + f.imgselect4.value;//現在選択されているリスト //group1 の処理 var matches = selectList.match(/img1|img2|img3/g); var other = ""; if(matches){ if(matches && matches.length == 2){ //グループの中で既に２つ選ばれている時、その他を決める other = group1[7-group1[matches[0]]-group1[matches[1]]]; } for(var i=1;i<=4;i++){ //リストから削除する remove(f["imgselect" + i], matches[0]); remove(f["imgselect" + i], matches[1]); remove(f["imgselect" + i], other); } } //group2 の処理 matches = selectList.match(/img4|img5|img6/g); other = ""; if(matches){ if(matches.length == 2){ other = group2[7-group2[matches[0]]-group2[matches[1]]]; } for(var i=1;i<=4;i++){ remove(f["imgselect" + i], matches[0]); remove(f["imgselect" + i], matches[1]); remove(f["imgselect" + i], other); } } } function remove(s, value){ //SELECT LIST から自分自身がvalue でない時 value を持つOPTION を削除する var len = s.length; if(value == "") return; for(var i=0;i<len;i++){ if(s.value != value && s.options[i].value == value){ s.remove(i); break; } } } function listReset(f){ for(var i=1;i<=4;i++){ var s = f["imgselect" + i]; s.length = 0; s.options[0]=new Option("---選択---",""); s.options[1]=new Option("イメージ1","img1"); s.options[2]=new Option("イメージ2","img2"); s.options[3]=new Option("イメージ3","img3"); s.options[4]=new Option("イメージ4","img4"); s.options[5]=new Option("イメージ5","img5"); s.options[6]=new Option("イメージ6","img6"); } } //--> </script> </HEAD> <BODY> <!--1つめ--> <FORM name="myform"> <SELECT name="imgselect1" onchange="restrict(this)"> <OPTION value="">---選択--- <OPTION value="img1">イメージ1 <OPTION value="img2">イメージ2 <OPTION value="img3">イメージ3 <OPTION value="img4">イメージ4 <OPTION value="img5">イメージ5 <OPTION value="img6">イメージ6 </SELECT> <!--2つめ--> <SELECT name="imgselect2" onchange="restrict(this)"> <OPTION>---選択--- <OPTION value="img1">イメージ1 <OPTION value="img2">イメージ2 <OPTION value="img3">イメージ3 <OPTION value="img4">イメージ4 <OPTION value="img5">イメージ5 <OPTION value="img6">イメージ6 </SELECT> <!--3つめ--> <SELECT name="imgselect3" onchange="restrict(this)"> <OPTION>---選択--- <OPTION value="img1">イメージ1 <OPTION value="img2">イメージ2 <OPTION value="img3">イメージ3 <OPTION value="img4">イメージ4 <OPTION value="img5">イメージ5 <OPTION value="img6">イメージ6 </SELECT> <!--4つめ--> <SELECT name="imgselect4" onchange="restrict(this)"> <OPTION>---選択--- <OPTION value="img1">イメージ1 <OPTION value="img2">イメージ2 <OPTION value="img3">イメージ3 <OPTION value="img4">イメージ4 <OPTION value="img5">イメージ5 <OPTION value="img6">イメージ6 </SELECT> <button type="button" onclick="listReset(this.form)">リセット</button> </FORM> </BODY> </HTML>

teratera6
質問者

お礼

サンプルまでつくって頂きありがとうございます。 しかし、このスクリプトでは、一度選択したものは、 次の選択項目からなくなってしまうので、それはまずいのです。 毎回選択肢はイメージ１～６まで表示させたいのです。 （この質問をした時につけた条件を除いて） こちらの説明不足もあり、申し訳ありません。 しかし、非常に参考になりましたので、今後の参考にさせて頂きます。

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.2

selectのoption要素をだしたり消したりすると 大掛かりになってしまうので、以下のような 程度で抑えておいた方が無難ではないでしょうか？ <script language="javascript"> function checkFunc(obj){ var count1=0; var count2=0; var f=obj.form; for(var i=0;i<f.length;i++){ var t=f[i].options[f[i].selectedIndex].text; if(f[i].type=="select-one" && (t=="イメージ1" || t=="イメージ2" || t=="イメージ3")){ count1++ }else if(f[i].type=="select-one" && (t=="イメージ4" || t=="イメージ5" || t=="イメージ6")){ count2++ } } if (count1>2){ alert("イメージ1～3はもう選べません") obj.selectedIndex=0; } if (count2>2){ alert("イメージ4～6はもう選べません") obj.selectedIndex=0; } } </script> <FORM name="myform"> <SELECT name="imgselect" onChange="checkFunc(this)"> <OPTION>＝＝＝＝＝ <OPTION value="image1">イメージ1 <OPTION value="image2">イメージ2 <OPTION value="image3">イメージ3 <OPTION value="image4">イメージ4 <OPTION value="image5">イメージ5 <OPTION value="image6">イメージ6 </SELECT> <!--2つめ--> <SELECT name="imgselect2" onChange="checkFunc(this)"> <OPTION>＝＝＝＝＝ <OPTION>イメージ1 <OPTION>イメージ2 <OPTION>イメージ3 <OPTION>イメージ4 <OPTION>イメージ5 <OPTION>イメージ6 </SELECT> <!--3つめ--> <SELECT name="imgselect3" onChange="checkFunc(this)"> <OPTION>＝＝＝＝＝ <OPTION>イメージ1 <OPTION>イメージ2 <OPTION>イメージ3 <OPTION>イメージ4 <OPTION>イメージ5 <OPTION>イメージ6 </SELECT> <!--4つめ--> <SELECT name="imgselect4" onChange="checkFunc(this)"> <OPTION>＝＝＝＝＝ <OPTION>イメージ1 <OPTION>イメージ2 <OPTION>イメージ3 <OPTION>イメージ4 <OPTION>イメージ5 <OPTION>イメージ6 </SELECT>

teratera6
質問者

補足

ご丁寧にありがとうございます。理想的な形になりました。 完璧です。 そして、事前に言うべきだったのですが、この教えて下さったスクリプトに、さらに以下のスクリプトを組み合わせなければならないのですが、どのようにすれば良いのでしょうか？ <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> function changeImage(imgnum){ if(imgnum==0){ document.images['myimg'].src="test.jpg"; } else if(imgnum==1){ document.images['myimg'].src="img01.jpg"; } else if(imgnum==1){ document.images['myimg'].src="img02.jpg"; } else if(imgnum==1){ document.images['myimg'].src="img03.jpg"; } else if(imgnum==1){ document.images['myimg'].src="img04.jpg"; } else if(imgnum==1){ document.images['myimg'].src="img05.jpg"; } else if(imgnum==1){ document.images['myimg'].src="img06.jpg"; } } function changeImage2(imgnum){ if(imgnum==0){ document.images['myimg2'].src="test.jpg"; } else if(imgnum==1){ document.images['myimg2'].src="img01.jpg"; } else if(imgnum==1){ document.images['myimg2'].src="img02.jpg"; } else if(imgnum==1){ document.images['myimg2'].src="img03.jpg"; } else if(imgnum==1){ document.images['myimg2'].src="img04.jpg"; } else if(imgnum==1){ document.images['myimg2'].src="img05.jpg"; } else if(imgnum==1){ document.images['myimg2'].src="img06.jpg"; } } function changeImage3(imgnum){ if(imgnum==0){ document.images['myimg3'].src="test.jpg"; } else if(imgnum==1){ document.images['myimg3'].src="img01.jpg"; } else if(imgnum==1){ document.images['myimg3'].src="img02.jpg"; } else if(imgnum==1){ document.images['myimg3'].src="img03.jpg"; } else if(imgnum==1){ document.images['myimg3'].src="img04.jpg"; } else if(imgnum==1){ document.images['myimg3'].src="img05.jpg"; } else if(imgnum==1){ document.images['myimg3'].src="img06.jpg"; } } function changeImage4(imgnum){ if(imgnum==0){ document.images['myimg4'].src="test.jpg"; } else if(imgnum==1){ document.images['myimg4'].src="img01.jpg"; } else if(imgnum==1){ document.images['myimg4'].src="img02.jpg"; } else if(imgnum==1){ document.images['myimg4'].src="img03.jpg"; } else if(imgnum==1){ document.images['myimg4'].src="img04.jpg"; } else if(imgnum==1){ document.images['myimg4'].src="img05.jpg"; } else if(imgnum==1){ document.images['myimg4'].src="img06.jpg"; } } </SCRIPT> </HEAD> <BODY> <!--1つめ--> <FORM name="myform"> <table> <tr> <td> <SELECT name="imgselect" onChange="changeImage(this.selectedIndex)"> <OPTION>選択 <OPTION>イメージ１ <OPTION>イメージ２ <OPTION>イメージ３ <OPTION>イメージ４ <OPTION>イメージ５ <OPTION>イメージ６ </SELECT> </td> <td><IMG src="test.jpg" name="myimg" border=0></td> </tr> </table> <!--２つめ--> <table> <tr> <td> <SELECT name="imgselect2" onChange="changeImage2(this.selectedIndex)"> <OPTION>選択 <OPTION>イメージ１ <OPTION>イメージ２ <OPTION>イメージ３ <OPTION>イメージ４ <OPTION>イメージ５ <OPTION>イメージ６ </SELECT> </td> <td><IMG src="test.jpg" name="myimg2" border=0></td> </tr> </table> <!--３つめ--> <table> <tr> <td> <SELECT name="imgselect3" onChange="changeImage3(this.selectedIndex)"> <OPTION>選択 <OPTION>イメージ１ <OPTION>イメージ２ <OPTION>イメージ３ <OPTION>イメージ４ <OPTION>イメージ５ <OPTION>イメージ６ </SELECT> </td> <td><IMG src="test.jpg" name="myimg3" border=0></td> </tr> </table> <!--４つめ--> <table> <tr> <td> <SELECT name="imgselect4" onChange="changeImage4(this.selectedIndex)"> <OPTION>選択 <OPTION>イメージ１ <OPTION>イメージ２ <OPTION>イメージ３ <OPTION>イメージ４ <OPTION>イメージ５ <OPTION>イメージ６ </SELECT> </td> <td><IMG src="test.jpg" name="myimg4" border=0></td> </tr> </table> </FORM> </BODY> </HTML>

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.1

４つ選択をして（送信）ボタンを押したときにチェックをするという意味ですか？ それとも、選択している最中に、リスト選択に制約が加えられるということでしょうか？（イメージ１～３を既に２つ選んでいるときには、他のリストには、１～３がでないというようなこと）

teratera6
質問者

補足

説明不足で申し訳ありません。 できれば、 選択している最中に、リスト選択に制約が加えられる （イメージ１～３を既に２つ選んでいるときには、他のリストには、１～３がでない） というようにしたいのですが。いかがでしょうか？

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

注目のQ&A

カテゴリ

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

専門家に質問してみよう

職業から探して質問する
質問する