- 締切済み
セレクトボックスの組み合わせを制限する
６つあるイメージの中から４回選択するものです。さらにこの選択に以下の条件をつけたいのですが。 ・４回選択する中で、イメージ１～３の中から２個 イメージ４～６の中から２個しか選択できない。 というものなのですが、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>
- teratera6
- お礼率36% (4/11)
- JavaScript
- 回答数9
- ありがとう数23
- みんなの回答 （9）
- 専門家の回答
みんなの回答
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
#8>フォームにて実際送信する値を”イメージ１”などのセレクトボックス内の文字を送信することは出来るのでしょうか？ それは、もちろんできます。 ただ、その場合、別に対応表を作る必要があると思います。 SELECT で選んだ画像が表示されるということなので、 SELECT のvalue で画像名を持つのが素直だと思います(もう１ステップ増えてしまうから) 'img01' が 'イメージ１' になったところでたいして違いはないように思います。
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
修正してみました ---------------------------------------------------------------- <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>
お礼
返信が遅くなり申し訳ありません。 たびたびのご回答ありがとうございます。 まさしく思惑通りの形で動作するのですが、他に回答して頂いた例にも返信しました様に、やはりこのタイプでもoptionのvalueが画像のファイル名になっている為に、セレクトボックスに表示される値自体を送信することが出来ません。この場合において、フォームにて実際送信する値を”イメージ１”などのセレクトボックス内の文字を送信することは出来るのでしょうか？
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
#3>（この質問をした時につけた条件を除いて）毎回選択肢はイメージ１～６まで表示させたいのです。 そうですね、勝手にそのような仕様にしました。 そのようにする修正は、簡単なので自分でもできると思いますが 一応伺いたいのですが、 [イメージ１][イメージ１] というように同じものを選ぶ場合もあるということですか？ そして、その場合も１～３の内２つが選択されたとするということですか？ または、 同じように思っていましたが、imgselect1のイメージ１ とimgselect2 のイメージ１は、違う画像であるということでしょうか？ （＃２の補足からは同じ画像のようですが）
補足
>[イメージ１][イメージ１]というように同じものを選ぶ場合もあるということですか？ まさしくそうです。そして、 imgselect1のイメージ１ とimgselect2 のイメージ１は同じ画像です。 なんだかごちゃごちゃしてますが、、
- yambejp
- ベストアンサー率51% (3827/7415)
共通部分をきりつめるとこんな感じで。 <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>
お礼
返信が遅くなり申し訳ありません。 凄いです。こういった方法があるのですね。完璧に動作しました。 ありがとうございます。非常に勉強になります。 実際はこのサンプルよりもかなり項目が多いので、非常に助かります。ただ一つ気になったのは、 このフォームを送信した場合、valueがimgー.jpgとなっているので、 送信される値もimgー.jpgとなってしまいますよね？これを、セレクトボックスに表示される”イメージ１”や”イメージ２”等を送信する値にすることは出来ないのでしょうか？
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
＃３で if(matches && matches.length == 2){ を if(matches.length == 2){ に修正して下さい。 (消し忘れです。そのままでも大丈夫ではありますが・）
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
#3で if(matches && matches.length == 2){ を if(matches.length == 2){ に修正して下さい。 (消し忘れです。そのままでも大丈夫ではありますが・）
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
一応サンプルを作ってみました、 ---------------------------------------------------------------- <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>
お礼
サンプルまでつくって頂きありがとうございます。 しかし、このスクリプトでは、一度選択したものは、 次の選択項目からなくなってしまうので、それはまずいのです。 毎回選択肢はイメージ１～６まで表示させたいのです。 （この質問をした時につけた条件を除いて） こちらの説明不足もあり、申し訳ありません。 しかし、非常に参考になりましたので、今後の参考にさせて頂きます。
- yambejp
- ベストアンサー率51% (3827/7415)
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>
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
４つ選択をして（送信）ボタンを押したときにチェックをするという意味ですか？ それとも、選択している最中に、リスト選択に制約が加えられるということでしょうか？（イメージ１～３を既に２つ選んでいるときには、他のリストには、１～３がでないというようなこと）
補足
説明不足で申し訳ありません。 できれば、 選択している最中に、リスト選択に制約が加えられる （イメージ１～３を既に２つ選んでいるときには、他のリストには、１～３がでない） というようにしたいのですが。いかがでしょうか？
関連するQ&A
- セレクトボックスでの結果で画像を変化させるモノを同ページに複数個表示する
セレクトボックスの結果によって画像を変化させるものを作ったのですが、これが一つのみだと動作したのですが、"同じ条件"で複数個おく方法が分かりません。 ちなみに試したものです。（一つ目すら動作しませんでした。） <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- function changeImage(){ var imgnum = document.forms['myform'].elements['imgselect'].selectedIndex; document.images['myimg'].src = 'test01.jpg'; if(imgnum==0){ document.myimg.src="test01.jpg"; }else if(imgnum==1){ document.myimg.src="test02.jpg"; } } //--> </SCRIPT> </HEAD> <BODY> <CENTER> <!--1つめ--> <IMG src="test.jpg" name="myimg" border=0> <FORM name="myform"> <SELECT name="imgselect" onChange="changeImage(this.options[this.selectedIndex].value)"> <OPTION>イメージ1 <OPTION>イメージ2 </SELECT> </FORM> <!--２つめここから下を追加したことで動作しなくなりました--> <IMG src="test.jpg" name="myimg" border=0> <FORM name="myform"> <SELECT name="imgselect" onChange="changeImage(this.options[this.selectedIndex].value)"> <OPTION>イメージ1 <OPTION>イメージ2 </SELECT> </FORM> <!--ここまで--> </CENTER> </BODY> </HTML> ＊全く同じ条件のものを複数個並べたいのですが、ただ、「form」 と「画像」の項目を増やすだけではだめなのでしょうか？ 自分でもこれじゃまずいんじゃない？とは何となく思うのですが、細かな原因が分かりません。かなりの初心者です。どうすればうまくいくのでしょうか？
- ベストアンサー
- JavaScript
- セレクトボックスの値で分岐処理をしたい
こんにちは。スクリプト初心者です。 現在セレクトボックスの、インデックス値を取得し、 それによっての分岐処理をしたいと考えています。 <html><head></head> <body> <form> <select name="1"> <option>選択できます。 <option>選択肢1 <option>選択肢2 </select> </form> </body></html> とあり、これに、 option「選択１」なら、PG1プロシージャを呼ぶ 同様 「選択2」なら、PG2プロシージャを呼ぶ としたい時、どのようにコーディングすれば よいのでしょうか。 サイトで調べたものの、 JavaScriptでの インデックス値の取得がわかりません。 宜しくお願いいたします。
- 締切済み
- JavaScript
- 2つのセレクトボックスで選択した組み合わせの結果
社内で個人的に使うためのツールを Google Sites で作成中なのですが、 できれば、セレクトボックスの組み合わせの結果はテキストではなく、 条件に一致した結果でのフローをまとめた画像やGoogleスライドを指定して、 各条件ごとに振り分けて表示させたいと考えています。 ネットで色々と検索しながら試行錯誤した結果、 <textarea> に画像やスライドを反映するのは不可と判断しておりますが、 なにか別の要素を指定することで可能な場合や、 その他に可能な方法があればご教示いただけますと幸いです！ コードは下記です。 </head> <!-- javascriptファイル --> <script type="text/javascript"> function check(f){ var arr={ "A":{"aaa":"Aとaaaを選択しました","bbb":"Aとbbbを選択しました"} ,"B":{"aaa":"Bとaaaを選択しました","bbb":"Bとbbbを選択しました"} }; var select1=f.elements["select1"].value; var select2=f.elements["select2"].value; f.elements["C"].value=(arr[select1] && arr[select1][select2])?arr[select1][select2]:""; } </script> <!-- jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <body> <p class="title">該当する組み合わせを選択してください。</p> <form> <div class="cp_ipselect cp_sl01"> <select name="select1" onchange="check(this.form);"> <option value="">------ 選択肢①を選択してください ------</option> <option value="A">A</option> <option value="B">B</option> </select> </div> <div class="cp_ipselect2 cp_sl02"> <select name="select2" onchange="check(this.form);"> <option value="">------ 選択肢②を選択してください ------</option> <option value="aaa">aaa</option> <option value="bbb">bbb</option> </select> </div> <p class="title2">選択肢①と②の組み合わせの結果</p> <!-- 下の textarea 箇所に各組み合わせごとにテキストではなく、画像やスライドを表示したいです --> <textarea name="C"></textarea> </form> </div> </body> </html>
- ベストアンサー
- JavaScript
- リンク
フォームを使ったリンクがありましたので、やってみましたらこれは、できました。 それで、「同じページ」で、こんな感じのを、 「別」のを作ろうとしたのですが、できませんでした。 (動作が変でした) 「もう一種類」。別のを作るには、どうしたらいいのでしょうか? よろしくお願いいたします。 (↓これと同じでなくてもいいです) <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- function selLink(){ selurl=document.myform.mysel.options[document.myform.mysel.selectedIndex].value; if (selurl != "" )location.href=selurl; } //--> </SCRIPT> </HEAD> <BODY> <FORM name="myform"> <SELECT name="mysel" onChange="selLink()"> <OPTION value="">クイックリンク <OPTION value="index.html">トップページ <OPTION value="page12.html">解説ページ </SELECT> </FORM> </BODY> </HTML>
- ベストアンサー
- JavaScript
- セレクトボックスを使った計算式
テキストボックスに文字を入力してセレクトボックスで四則計算 をプルダウンメニューで選択し、３つ目のテキストボックスに 計算結果を表示するにはどのようにしたらよいのでしょうか？ とりあえず途中まで作ってみました。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>スクリプト練習</title> <script type="text/javascript"> <!-- function keisan(){ if(option value="＋"){ document.f1.t3.value(document.f1.t1.value + document.f1.t2.value); } } //--> </script> </head> <body> <form name="f1"> <input type="text" size="5" name="t1"> <select name="color2"> <option value="＋">＋</option> <option value="－">－</option> <option value="×">×</option> <option value="÷">÷</option> </select> <input type="text" size="5" name="t2"> <input type="button" value="=" onClick="keisan()"> <input type="text" size="5" name="t3"> </form> </body> </html> if文を作るところが特にわからず止まっています。 どうかよろしくお願いします。
- ベストアンサー
- JavaScript
- フォーカスの移動
どうしてもわからないので、教えて下さい。 下の option ボタンのいずれかを選択した際に、 自動的にテキストボックスにフォーカスが移るような スクリプトを書きたいのですが、 スクリプトの内容と、htmlにへの組み込み方を どのように実装してよいかわかりません。 ------------------------------------- <html> <title></title> <head> <script language="JavaScript"> //フォカース移動 function moveFocus() { //？？？？ } </script> </head> <body> <form name="myForm"> <select name="mySelect"> <option name="op1">test1</option> <option name="op2">test2</option> </select> <input type="text" name="myText"></input> </form> </body> </html>
- ベストアンサー
- JavaScript
- セレクトボックスの幅を指定した状態で、選択肢の文字列を全て表示する方法
お世話になっております。 環境： Windows2000 IE6.0 HTMLでセレクトボックス(SELECTタグ)を使用しているのですが、選択肢(OPTIONタグ)の文字列が長いと、セレクトボックスの幅も長くなってしまいます。 STYLESHEETでWIDTHを指定してみたのですが、選択肢の文字列が途中で切り取られてしまい、使えません。 セレクトボックスの幅を指定し、プルダウンで表示される選択肢の文字列は全て表示されるような方法があれば教えて下さい。 ■ソース■ <html> <head> <STYLE TYPE="text/css"> <!-- SELECT { width: 100px; } --> </STYLE> <title>サンプル</title> </head> <body> <select name="" selected> <option name="0">選択肢１</option> <option name="0">長い文字列XXXXXXXXXXXXXXXXXXXXXXX</option> <option name="0">選択肢３</option> <option name="0">選択肢４</option> </select> </body>
- ベストアンサー
- HTML
- Smartyで、セレクトボックスが選択された時に
いつもお世話になっています。 Smartyに関して質問します。 以下のようなtemplateがあった場合に、 <html> <head><title></title> </head> <body> <selection name="hobby"> <option name="hobby[]" value="0" >スポーツ</option> <option name="hobby[]" value="1">卓球</option> </selection> <div id ="hobby_details">ここに、選択された値により表示する内容を変える </div> </body> </html> セレクトが選択されたら、それをキーにdbに接続して値をとってき、 再度<div></div>内部に値を表示することはできないのでしょうか？ その場合として、pluginクラスを作って表示することはできないのでしょうか？ したいのが、セレクトボックスが選択されたときに、<div></div>内に値を表示したいのです。 宜しくお願いします。
- ベストアンサー
- PHP
- [JavaScript+<select>]最初から５文字一致でセレクト状態にしたい。
こんばんは。 ＨＴＭＬとＪａｖａＳｃｒｉｐｔで簡単な動的ページを作成しています。 そこで、行き詰っていることがありますのでご相談を・・・。 こういう<SELECT>があるとします・・・。 <FORM name="myform"> <SELECT name="menu"> <OPTION value="item1001">メニュー１</OPTION> <OPTION value="item2001">メニュー２</OPTION> </SELECT> </FORM> 初期値を「メニュー２」にしたい場合・・・これをJavaScriptで指定する場合、ONLOADのタイミングで・・・ document.myform.menu.value = "item2001"; とすればいけます。 今回は・・・"item2"だけの情報でヒットさせたいと思っています。 つまり、optionのvalue値の頭から５桁だけのマッチングでセレクト状態にさせたいのです。 ループという形をとらずにセレクトさせる方法を探しています。 テクニックをご教授下さい・・・。 宜しくお願い致します。
- ベストアンサー
- JavaScript
- なぜｇetElementsByNameとgetElementsByIdでセレクトボックスを参照できないでしょうか
初心者ですが、ｇetElementsByNameとgetElementsByIdの使い方はよくわかりません。知っている方がいらっしゃいましたらぜひご教授ください。 下記のソースなんですが、なぜ var arrayObj1 = document.getElementsByName("bsListName"); var arrayObj2 = document.getElementsById("bs"); というふうにセレクトボックス要素を参照することができなくて、javasciptエラーが出てしまう。 もし var arrayObj1 = document.getElementsByName("bsListName"); var arrayObj2 = document.getElementsById("bs"); この2行のソースを削除したら、javasciptエラーがなくなります。 つまり、なぜかｇetElementsByNameとgetElementsByIdでセレクトボックスを参照できないでしょうか <html> <head> <script type="text/javascript"> function refleshNewListName(){ var arrayObj = document.myform.bsListName ; var arrayObj1 = document.getElementsByName("bsListName"); var arrayObj2 = document.getElementsById("bs"); alert(arrayObj.selectedIndex); } </script> </head> <body> 1122 <form name="myform"> <div id="bs"> <select name="bsListName" onChange="refleshNewListName()" > <option value="-1" selected>--新規リスト--</option> <option value="10720" class="my_list">Myリスト</option> <option value="10721" class="recent_sales_list">常用リスト</option> </select> </div> </form> </body> </html>
- 締切済み
- JavaScript
補足
＞SELECT のvalue で画像名を持つのが素直だと思います(もう１ステップ増えてしまうから) サンプルとして挙げた例が悪かったと思うのですが、実際このスクリプトを使用する際は、 <option value="img1">あいうえお</option> の様に、イメージとは全く違う言葉を用いなければなりません。そして、その言葉が送信しなければならない値となってくるのです。ややこしくてすいません。