プロが教える店舗＆オフィスのセキュリティ対策術

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

締切済

  • 質問者：teratera6
  • 質問日時：
  • 回答数：9件

６つあるイメージの中から４回選択するものです。さらにこの選択に以下の条件をつけたいのですが。

・４回選択する中で、イメージ１～３の中から２個
イメージ４～６の中から２個しか選択できない。

というものなのですが、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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (9件)

No.9

  • 回答者： BLUEPIXY
  • 回答日時：

#8>フォームにて実際送信する値を”イメージ１”などのセレクトボックス内の文字を送信することは出来るのでしょうか？


それは、もちろんできます。
ただ、その場合、別に対応表を作る必要があると思います。

SELECT で選んだ画像が表示されるということなので、
SELECT のvalue で画像名を持つのが素直だと思います(もう１ステップ増えてしまうから)
'img01' が 'イメージ１' になったところでたいして違いはないように思います。

この回答への補足

＞SELECT のvalue で画像名を持つのが素直だと思います(もう１ステップ増えてしまうから)
サンプルとして挙げた例が悪かったと思うのですが、実際このスクリプトを使用する際は、

<option value="img1">あいうえお</option>

の様に、イメージとは全く違う言葉を用いなければなりません。そして、その言葉が送信しなければならない値となってくるのです。ややこしくてすいません。

補足日時：2006/05/30 15:26
通報する
    • good
    • 0
    • 件
通報する

No.8

  • 回答者： BLUEPIXY
  • 回答日時：

修正してみました


----------------------------------------------------------------
<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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2006/05/30 06:11

No.7

  • 回答者： BLUEPIXY
  • 回答日時：

#3>（この質問をした時につけた条件を除いて）毎回選択肢はイメージ１～６まで表示させたいのです。


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

この回答への補足

>[イメージ１][イメージ１]というように同じものを選ぶ場合もあるということですか？

まさしくそうです。そして、
imgselect1のイメージ１ とimgselect2 のイメージ１は同じ画像です。

なんだかごちゃごちゃしてますが、、

補足日時：2006/05/24 12:48
通報する
    • good
    • 0
    • 件
通報する

No.6

  • 回答者： yambejp
  • 回答日時：

共通部分をきりつめるとこんな感じで。



<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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2006/05/30 05:55

No.5

  • 回答者： BLUEPIXY
  • 回答日時：

＃３で


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

No.4

  • 回答者： BLUEPIXY
  • 回答日時：

#3で


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

No.3

  • 回答者： BLUEPIXY
  • 回答日時：

一応サンプルを作ってみました、


----------------------------------------------------------------
<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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2006/05/24 01:42

No.2

  • 回答者： yambejp
  • 回答日時：

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>

この回答への補足

ご丁寧にありがとうございます。理想的な形になりました。
完璧です。
そして、事前に言うべきだったのですが、この教えて下さったスクリプトに、さらに以下のスクリプトを組み合わせなければならないのですが、どのようにすれば良いのでしょうか？

<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>

補足日時：2006/05/24 01:34
通報する
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： BLUEPIXY
  • 回答日時：

４つ選択をして（送信）ボタンを押したときにチェックをするという意味ですか？


それとも、選択している最中に、リスト選択に制約が加えられるということでしょうか？（イメージ１～３を既に２つ選んでいるときには、他のリストには、１～３がでないというようなこと）

この回答への補足

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

補足日時：2006/05/23 19:19
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報