複数のoptionと一致するものを表示するには
- 複数の<option>と一致するものだけを表示させたい方法について質問しています。現在、特定の<select>要素の選択肢と、<div>要素の一致するものを表示させるためのコードを作成していますが、うまくいっていません。詳細な解決策やヒントを教えてください。
- 質問者は、<select>要素の複数の選択肢と、<div>要素の一致するものを表示させるためのコードを作成していますが、うまくいっていません。具体的には、最初の2つの<select>要素の処理が行われず、最後の<select>要素のみが処理されてしまうとのことです。解決策やヒントを教えてください。
- <select>要素の選択肢と、<div>要素の一致するものを表示させるためのコードを作成していますが、うまくいっていません。具体的には、最初の2つの<select>要素の処理が行われず、最後の<select>要素のみが処理されてしまうとのことです。解決策やヒントを教えてください。
- ベストアンサー
複数の<option>と一致するものを表示するには
サンプルで作ったコードは、 <select name="select1">の<option>、 <select name="select2">の<option>、 <select name="select3">の<option>で選び、その下にあるボタンを押すと、 <div class="sample_in">の<dd>タグ内と上記３つの項目に一致するにものだけを表示させたい と考え下記コードを作りました。しかし、select1とselect2は処理が行われません。 select3のみが処理されてしまいます。例えば・・・ 「1組,男子,おとなしい」を選んだ場合、サンプルでは一致するものは１つしかないので その親である<div class="sample_in">のみを表示させたいですが、 2組、女子でも表示の対象になり、一致するものが２つになってしまいます。 解決に役立つ様なプロパティやメソッドはないでしょうか。ヒントだけでもお願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio … <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>サンプル</title> <style type="text/css"> #mainBox { width: 300px; border: 3px solid black; padding: 10px; } .sample_in { width: 250px; border: 1px solid SteelBlue; padding: 10px; margin: 20px; } .sample_in dt { color: Magenta; } </style> </head> <body> <form name="myForm" action="#"> <select name="select1"> <option value="指定なし" selected="selected">指定なし</option> <option value="1組">1組</option> <option value="2組">2組</option> <option value="3組">3組</option> </select> <select name="select2"> <option value="指定なし" selected="selected">指定なし</option> <option value="男子">男子</option> <option value="女子">女子</option> </select> <select name="select3"> <option value="指定なし" selected="selected">指定なし</option> <option value="おとなしい">おとなしい</option> <option value="活発">活発</option> <option value="普通">普通</option> </select> <input type="button" value="OK" onclick="test0()"> </form> <div id="sample"> <div class="sample_in"> <dl><dt>組名</dt><dd>2組</dd></dl> <dl><dt>性別</dt><dd>女子</dd></dl> <dl><dt>性格</dt><dd>おとなしい</dd></dl> </div> <div class="sample_in"> <dl><dt>組名</dt><dd>1組</dd></dl> <dl><dt>性別</dt><dd>女子</dd></dl> <dl><dt>性格</dt><dd>普通</dd></dl> </div> <div class="sample_in"> <dl><dt>組名</dt><dd>1組</dd></dl> <dl><dt>性別</dt><dd>男子</dd></dl> <dl><dt>性格</dt><dd>おとなしい</dd></dl> </div> <div class="sample_in"> <dl><dt>組名</dt><dd>2組</dd></dl> <dl><dt>性別</dt><dd>女子</dd></dl> <dl><dt>性格</dt><dd>活発</dd></dl> </div> <div class="sample_in"> <dl><dt>組名</dt><dd>2組</dd></dl> <dl><dt>性別</dt><dd>男子</dd></dl> <dl><dt>性格</dt><dd>活発</dd></dl> </div> <div class="sample_in"> <dl><dt>組名</dt><dd>1組</dd></dl> <dl><dt>性別</dt><dd>男子</dd></dl> <dl><dt>性格</dt><dd>普通</dd></dl> </div> </div> <script type="text/javascript"> function test0() { var div1 = document.getElementById('sample'); var div2 = div1.children; var index1 = document.myForm.select1.selectedIndex; var index2 = document.myForm.select2.selectedIndex; var index3 = document.myForm.select3.selectedIndex; var str1 = document.myForm.select1.options[index1].text; var str2 = document.myForm.select2.options[index2].text; var str3 = document.myForm.select3.options[index3].text; var ary = [str1, str2, str3]; for(m=0; m<ary.length; m++){ for(i=0, len1=div2.length; i<len1; i++){ var dd = div2[i].getElementsByTagName("dd"); for(j=0, len2=dd.length; j<len2; j++){ var ddText = dd[j].textContent; if( ary[m] == ddText ){ dd[j].parentNode.parentNode.style.display = ''; break; }else{ dd[j].parentNode.parentNode.style.display = 'none'; } } } } alert("エラーなし"); //動作確認用 } </script></body></html>
- tekkenman7
- お礼率70% (150/212)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
こんな感じかなぁ・・・ <style> #mainBox {width:300px;border: 3px solid black;padding: 10px;} div.sample_in {width: 250px;border: 1px solid SteelBlue;padding: 10px;margin: 20px;} div.sample_in dt {color: Magenta;} </style> <script> function test0(f) { var div1 = document.getElementById('sample'); var div2 = div1.getElementsByTagName('div'); var str1 = f.elements["select1"].options[f.elements["select1"].selectedIndex].value; var str2 = f.elements["select2"].options[f.elements["select2"].selectedIndex].value; var str3 = f.elements["select3"].options[f.elements["select3"].selectedIndex].value; for(var i=0; i<div2.length; i++){ var dd = div2[i].getElementsByTagName("dd"); if( (dd[0].textContent==str1 || str1=='指定なし') && (dd[1].textContent==str2 || str2=='指定なし') && (dd[2].textContent==str3 || str3=='指定なし') ){ div2[i].style.display = ''; }else{ div2[i].style.display = 'none'; } } } </script> <form> <select name="select1"> <option value="指定なし" selected>指定なし</option> <option value="1組">1組</option> <option value="2組">2組</option> <option value="3組">3組</option> </select> <select name="select2"> <option value="指定なし" selected>指定なし</option> <option value="男子">男子</option> <option value="女子">女子</option> </select> <select name="select3"> <option value="指定なし" selected>指定なし</option> <option value="おとなしい">おとなしい</option> <option value="活発">活発</option> <option value="普通">普通</option> </select> <input type="button" value="OK" onclick="test0(this.form)"> </form> <div id="sample"> <div class="sample_in"> <dl><dt>組名</dt><dd>2組</dd></dl> <dl><dt>性別</dt><dd>女子</dd></dl> <dl><dt>性格</dt><dd>おとなしい</dd></dl> </div> <div class="sample_in"> <dl><dt>組名</dt><dd>1組</dd></dl> <dl><dt>性別</dt><dd>女子</dd></dl> <dl><dt>性格</dt><dd>普通</dd></dl> </div> <div class="sample_in"> <dl><dt>組名</dt><dd>1組</dd></dl> <dl><dt>性別</dt><dd>男子</dd></dl> <dl><dt>性格</dt><dd>おとなしい</dd></dl> </div> <div class="sample_in"> <dl><dt>組名</dt><dd>2組</dd></dl> <dl><dt>性別</dt><dd>女子</dd></dl> <dl><dt>性格</dt><dd>活発</dd></dl> </div> <div class="sample_in"> <dl><dt>組名</dt><dd>2組</dd></dl> <dl><dt>性別</dt><dd>男子</dd></dl> <dl><dt>性格</dt><dd>活発</dd></dl> </div> <div class="sample_in"> <dl><dt>組名</dt><dd>1組</dd></dl> <dl><dt>性別</dt><dd>男子</dd></dl> <dl><dt>性格</dt><dd>普通</dd></dl> </div> </div>
関連するQ&A
- このサンプルコードが実行されない理由はなぜですか？
セレクト１とセレクト２で絞り込みたいキーワードを指定し <input>の絞込によりstart()を実行させ、 <dd>のテキストに一致するもののみ表示させたく、 そのコードを作ってみましたが、正しく実行されません。 どこをどのようにしたら良いのでしょうか。 <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title></title> <style type="text/css"> dl{ overflow:hidden; margin-bottom: 30px; } dd{ float:left; } dt{ float:left; clear:both; color:#f00; } </style> <script type="text/javascript"> function start() { var fs_a = document.myform.sel_a; var fs_b = document.myform.sel_b; var text_a = fs_a.options[fs_a.selectedIndex].text; var text_b = fs_b.options[fs_b.selectedIndex].text; var tag_dd = document.getElementsByTagName('dd'); var tag_dl = document.getElementsByTagName('dl'); for(var i = 0; i<=tag_dd.length; i++){ if(tag_dd.item[i].textContent == ans_a || tag_dd.item[i].innerText == ans_a){ tag_dl.style.display = ''; }else{ tag_dl.style.display = 'none'; } if(tag_dd.item[i].textContent == ans_b || tag_dd.item[i].innerText == ans_b){ tag_dl.style.display = ''; }else{ tag_dl.style.display = 'none'; } } } </script> </head> <body> <form name="myform"> <fieldset> <legend>セレクト１</legend> <select name="sel_a"> <option value="指定なし">指定なし</option> <option value="">あ</option> <option value="">い</option> <option value="">う</option> </select> </fieldset> <fieldset> <legend>セレクト２</legend> <select name="sel_b"> <option value="指定なし">指定なし</option> <option value="">え</option> <option value="">お</option> <option value="">か</option> </select> </fieldset> <input type="button" value="絞込" onclick="start()"> </form> <dl> <dt>セレクト１</dt><dd class="ddc">あ</dd> <dt>セレクト２</dt><dd class="ddc">か</dd> </dl> <dl> <dt>セレクト１</dt><dd class="ddc">い</dd> <dt>セレクト２</dt><dd class="ddc">お</dd> </dl> <dl> <dt>セレクト１</dt><dd class="ddc">う</dd> <dt>セレクト２</dt><dd class="ddc">え</dd> </dl> </body> </html>
- ベストアンサー
- JavaScript
- 名前と名字をそれぞれ比較して表示する
名字と名前に分けて、selectで比較するものを作りたいです。 名前は無視して「山田」という名字のみを比較する場合、 「あああ」という名字で「太郎」という名前を比較する場合 全部を無視して比較する場合など、で比較したいです。 名字を無視して名前のみを比較するものは使いません。 <dd><p>山田太郎</p></dd>というのを変えずに、 あまりコードを増やさずにやりたくて htm.match(sn) && sm="指定なし"な感じにやってみたのですが、 上手にできません。この場合どんなものが役立つのでしょうか。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio … <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <title>サンプル</title> </head> <body> <form action="#"> <fieldset> <legend>名字</legend> <select name="m" onchange="aaa(this.form)"> <option value="日本">日本</option> <option value="山田">山田</option> <option value="あああ">あああ</option> <option value="い">い</option> <option value="う">う</option> <option value="え">え</option> </select> </fieldset> <fieldset> <legend>名前</legend> <select name="n" onchange="aaa(this.form)"> <option value="太郎">太郎</option> <option value="花子">花子</option> <option value="ままま">ままま</option> <option value="みみ">みみ</option> <option value="む">む</option> </select> </fieldset> </form> <dl> <dt>名前</dt> <dd><p>日本太郎</p></dd> </dl> <dl> <dt>名前</dt> <dd><p>い花子</p></dd> </dl> <dl> <dt>名前</dt> <dd><p>山田太郎</p></dd> </dl> <script type="text/javascript"> function aaa(f){ var sn = f.n.value; var sm = f.m.value; var idID = document.getElementsByTagName('p'); var idLen = idID.length; for(i=0; i<idLen; i++){ var htm = idID[i].innerHTML; if(htm==sn+sm || htm.match(sn) && sm="指定なし" || sn="指定なし"){ alert("true"); }else{ alert("false"); } } } </script> </body> </html>
- ベストアンサー
- JavaScript
- 一致する文字を見つけ、それのみ表示させる方法
javascriptを使って<body>内の<div>に含まれる文字と一致するものを絞り込み、残りは非表示にする方法を教えてください。 ドロップダウンで文字を選びOKボタンを押すと あ の場合は<div>内の「あ」が１つなので１つだけ表示され い は２つあるので２つ表示され う は３つ、というように idやclassをつけて判断させるのではなく、中身の文字のみを判断できるようにしたいです。 <html> <head> <title></title> <script type="text/javascript"> </script> </head> <body> <form> <select> <option value="">あ</option> <option value="">い</option> <option value="">う</option> </select> <input type="button" value="OK" onclick=""> </form> <div>あ</div> <div>い</div> <div>う</div> <div>い</div> <div>う</div> <div>う</div> </body> </html>
- ベストアンサー
- JavaScript
- 数値の比較で正しく評価されない理由
下記サンプルで、trueになるべきところがfalseになります。なぜでしょうか。 このサンプルでは識別番号のラスト値のみを比較するものですが、 実際は複数の<dd>の値を比較します。 NO12「DE」-114 という1行の文章に複数の比較する対象が含まれる場合は、 １つの<dd>に<span>で囲い【NO12】、【「DE」】、【114】のそれぞれを比較の対象にしますが、 こういったやり方自体が間違っているのでしょうか。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <title>サンプル</title> </head> <body> <form action="#"> <fieldset> <legend>識別番号のラスト値</legend> <select name="sss" onchange="spl(this.form)"> <option value="50">50以下</option> <option value="100">100以下</option> <option value="150">150以下</option> <option value="200">200以下</option> </select> </fieldset> </form> <dl> <dt>名前</dt> <dd>ジム</dd> <dt>識別番号</dt> <dd><p><span>NO12</span>「<span>DE</span>」-<span>114</span></p></dd> </dl> <dl> <dt>名前</dt> <dd>トム</dd> <dt>識別番号</dt> <dd><p><span>NO33</span>「<span>DR</span>」-<span>168</span></p></dd> </dl> <dl> <dt>名前</dt> <dd>エミリー</dd> <dt>識別番号</dt> <dd><p><span>NO8</span>「<span>AB</span>」-<span>93</span></p></dd> </dl> <script type="text/javascript"> function spl(f){ var selValue = f.sss.value; var idID = document.getElementsByTagName('p'); var idLen = idID.length; for(i=0; i<idLen; i++){ var spans = idID[i].getElementsByTagName('span'); var pawwar = spans[2].innerHTML; if(pawwar<=selValue){ alert("true"); }else{ alert("false"); } } } </script> </body> </html>
- ベストアンサー
- 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
- 【PHP】メールフォームの連動するセレクトボックス
メールフォームを作っているのですが、 連動するセレクトボックスにおいて、 自動返信メールに内容が思った様に記載されません。 複数のチェックボックがあり、それぞれに連動して、 セレクトボックス1でサイズを選び、セレクトボックス2で数を選ぶようになっています。 ソースは最後に記載しますが、希望する返信メールの形は以下の通りです。 ーーーーーー現在ーーーーーー 【色 / サイズ / 数量】 S 1個 L 2個 S 3個 【料金】 （表示なし） ーーーーーー希望ーーーーーー 【色 / サイズ / 数量】 レッド S 1個 ブルー L 2個 イエロー S 3個 【料金】 S × 4個：600円 ＝1,800円 L × 2個：900円 ＝1,800円 ご教示のほど、お願い致します。 以下、ソースです。 <dt>色</dt> <dd> <label class="color"><input type="checkbox" name="color[]" id="color_01" value="レッド">レッド</label> </dd> <dd> <select class="parent" name="size_01"> <option value="" class="msg" selected>サイズを選択</option> <option value="S">S：600円</option> <option value="L">L：900円</option> </select> </dd> <dd> <select class="children" name="number_01"> <option value="0" class="msg" selected>0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select><br> </dd> <dd> <label class="color"><input type="checkbox" name="color[]" id="color_01" value="ブルー">ブルー</label> </dd> <dd> <select class="parent" name="size_02"> <option value="" class="msg" selected>サイズを選択</option> <option value="S">S：600円</option> <option value="L">L：900円</option> </select> </dd> <dd> <select class="children" name="number_02"> <option value="0" class="msg" selected>0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select><br> </dd> ＜以下、他の色が同様に続きます＞ <dt>料金</dt> <dd class="required"> <div id="result"> S：合計<span class="s maisu" name="sum_s_n" value="0">0</span>個 × 600円 ＝ <span class="s kingaku" name="sum_s_p" value="">0</span>円<br> L：合計<span class="a maisu" name="sum_a_n">0</span>個 × 900円 ＝ <span class="all kingaku" name="sum_all">0</span>
- ベストアンサー
- PHP
- 複数のcookieでの保存
javescriptはかなりの初心者です。 サイトや本のサンプルで勉強してテキストボックス、チェックボタン、 ラジオボタンに記入した内容を保存するcookieの作成を試みたのですが 上手くいきません;; どなたかご教授よろしくお願いします。 やりたい事はフォームに記入・チェックした内容をセレクトボタン 「保存1」「保存2」・・・と選択したら、それぞれにセーブ・ロードを複数記憶させたいと思っています。 5つほどの記憶を予定しています。 実際に保存させるフォーム数は数十個以上あり、テキストボックスの記入内容は数字だけの予定です。 また、それらは別途の計算するスクリプトでの入力内容として使っています。(競合とかの問題もあるのでしょうか?) なお、下記の状態でもラジオボタンだけは保存も出来ませんでした; 作成したものを載せましたが、なにぶん初心者の作成したscriptな だけに役に立たない構文で、説明不足もあるかもしれませんがよろしくお願いします。 <HTML> <HEAD> <script language="JavaScript"> <!-- function set_cookie(){ var a = document.getElementById('myform').a.value; var b = document.getElementById('myform').b.selectedIndex; var c = document.getElementById('myform').c.selectedIndex; var d = document.getElementById('myform').d.checked; var e = document.getElementById('myform').e[0].checked; var f = document.getElementById('myform').e[1].checked; EXP=new Date(); EXP.setTime(EXP.getTime()+(30*1000*60*60*24)); document.cookie= a+"["+b+"["+c+"["+d+"["+e+"["+f+"["+";expires="+EXP.toGMTString(); } function get_cookie(){ var GET=document.cookie; GET=GET.split("["); document.getElementById('myform').a.value = GET[0]; document.getElementById('myform').b.selectedIndex = GET[1]; document.getElementById('myform').c.selectedIndex = GET[2]; document.getElementById('myform').d.checked = GET[3]; document.getElementById('myform').e[0].checked = GET[4]; document.getElementById('myform').e[1].checked = GET[5]; } --> </script> </HEAD> <BODY> <form id="myForm">テキスト1<BR> <INPUT size="20" type="text" maxlength="10" value="0" name="a"><BR> <BR> セレクト1<BR> <SELECT size="2" name="b"> <OPTION value="0" selected>0</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><BR> <BR> セレクト2<BR> <SELECT name="c"> <OPTION value="0" selected>0</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><BR> <BR> チェック1<BR> <INPUT type="checkbox" name="d" value="0"><BR> <BR> ラジオ1<BR> <INPUT type="radio" name="e" value="0"><BR> <INPUT type="radio" name="e" value="1"><BR> <BR> <BR> <SELECT name="selectsave"> <OPTION selected>保存1</OPTION> <OPTION>保存2</OPTION> <OPTION>保存3</OPTION> <OPTION>保存4</OPTION> <OPTION>保存5</OPTION> </SELECT><BR> <BR> <INPUT type="button" value="セーブ" name="save" onclick="set_cookie()"> <P><INPUT type="button" value="ロード" name="lord" onclick="get_cookie()"><BR> </P> </form> </BODY> </HTML>
- ベストアンサー
- JavaScript
- DD,DT,DDを横並び。paddingとmarginと無指定で
DD,DT,DDを横並び。paddingとmarginと無指定で 下記の内どれが一番使われているのでしょうか？ 理由も教えていただけれるとありがたいです。 dl,dt,dd{ margin:0; padding:0;} dt{ float:left; width:8em; } .list0 dd{ padding-left:7em;} .list2 dd{ margin-left:8em;} <div> <dl class="list0"> <dt>短いタイトル</dt> <dd>短い説明、短い説明、短い説明</dd> <dt>短いタイトル</dt> <dd>短い説明、短い説明、短い説明</dd> </dl> <br /> <dl class="list1"> <dt>短いタイトル</dt> <dd>短い説明、短い説明、短い説明</dd> <dt>短いタイトル</dt> <dd>短い説明、短い説明、短い説明</dd> </dl> <br /> <div class="list2"> <dl> <dt>短いタイトル</dt> <dd>短い説明、短い説明、短い説明</dd> </dl> <dl> <dt>短いタイトル</dt> <dd>短い説明、短い説明、短い説明</dd> </dl> </div> </div>
- ベストアンサー
- HTML
- <li>の画像およびテキストリンクのランダム複数表示
javascriptでランダム表示する方法を教えて下さい。 サイト内に商品の一覧を作成しようと考えており、それぞれの商品画像、テキストリンクをランダムで動かしたいと思っております。 商品数は10点くらいになる予定です。 <div id="sample"> <ul> <li> <dl> <dt>商品1</dt> <dd>商品画像</dd> <dd>商品コメント</dd> </dl> </li> <li> <dl> <dt>商品2</dt> <dd>商品画像</dd> <dd>商品コメント</dd> </dl> </li> </ul> </div> ソースはこんな感じで、10点程の掲載予定です。 <li>～～</li>リスト10点をランダム表示する javascriptを教えて下さい。 よろしくお願いいたします。
- 締切済み
- JavaScript
- セレクトメニューで選択された項目によって、HTMLの一部を表示したり非表示にしたりするには？
お世話になります。 セレクトメニューで選択された項目によって、HTMLの一部を表示したり非表示にしたりするにはどうすればいいでしょうか？ <select class = "select-box" tabindex="7" name='payment_string'> <option value="1,ジャパンネット銀行,0">ジャパンネット銀行</option> <option value="2,郵貯銀行,0">郵貯銀行</option> <option value="3,イーバンク銀行,0">イーバンク銀行</option> <option value="4,コンビニ決済,0">コンビニ決済</option> <option value="5,クレジットカード,0">クレジットカード</option> </select> 上記のようなセレクトメニューがあり、セレクトメニューが、『コンビニ 決済』、『クレジットカード』が選択されたときのみ下記の入力項目を表 示させたいと思っています。。 <div class='order_form_out_side_box'> <div class='order_form_name'> <p>ご住所</p> </div> <div class='order_form_contents'> <p>郵便番号：<input type = "text" class="name-box1" accesskey="i" tabindex="11" name = "bango" onkeyup="setbango(this.value)" value ="" /> <br /> <p>都道府県：<input type = "text" class="name-box1" accesskey="j" tabindex="12" name = "ken" value ="" /></p> <br /> <p>市・区：<input type = "text" class="name-box5" accesskey="k" tabindex="13" name = "shi" value ="" /></p> <br /> <p>町・村：<input type = "text" class="name-box5" accesskey="l" tabindex="14" name = "machi" value ="" /></p> <br /> <p>番地・建物名：<input type = "text" class="name-box5" accesskey="m" tabindex="15" name = "banchitate" value ="" /></p> <br /> </div> <br class='clear' /> </div> <div class='order_form_out_side_box'> <div class='order_form_name'> <p>電話番号</p> </div> <div class='order_form_contents'><p><input type = "text" class="name-box6" accesskey="n" tabindex="16" name = "tel" value ="" /> ハイフンなしでご入力ください。</p> <br /> </div> JavaScriptを利用してやるという事は分かったのですが、JavaScript の知識がなく、どうすればいいのか分かりません。 どのようにすればこの機能を実現できるでしょうか？ご教授のほどよろ しくお願いします。
- ベストアンサー
- JavaScript
お礼
難しく考えすぎていました。 凄く参考になりました。有難うございます。 何も一致しなかった場合は文章をinnerHTMLで表示させるように少し改良してみました。動作するたびにinnerHTML=""にするところが強引でしょうか。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>サンプル２</title> <style type="text/css"> #mainBox { width: 300px; border: 3px solid black; padding: 10px; } .sample_in { width: 250px; border: 1px solid SteelBlue; padding: 10px; margin: 20px; } .sample_in dt { color: Magenta; } </style> </head> <body> <form action="#"> <select name="select1"> <option value="指定なし" selected="selected">指定なし</option> <option value="1組">1組</option> <option value="2組">2組</option> <option value="3組">3組</option> </select> <select name="select2"> <option value="指定なし" selected="selected">指定なし</option> <option value="男子">男子</option> <option value="女子">女子</option> </select> <select name="select3"> <option value="指定なし" selected="selected">指定なし</option> <option value="おとなしい">おとなしい</option> <option value="活発">活発</option> <option value="普通">普通</option> </select> <input type="button" value="OK" onclick="testALL(this.form)" /> </form> <div id="sample"> <div class="sample_in"> <dl><dt>組名</dt><dd>2組</dd></dl> <dl><dt>性別</dt><dd>女子</dd></dl> <dl><dt>性格</dt><dd>おとなしい</dd></dl> </div> <div class="sample_in"> <dl><dt>組名</dt><dd>1組</dd></dl> <dl><dt>性別</dt><dd>女子</dd></dl> <dl><dt>性格</dt><dd>普通</dd></dl> </div> <div class="sample_in"> <dl><dt>組名</dt><dd>1組</dd></dl> <dl><dt>性別</dt><dd>男子</dd></dl> <dl><dt>性格</dt><dd>おとなしい</dd></dl> </div> <div class="sample_in"> <dl><dt>組名</dt><dd>2組</dd></dl> <dl><dt>性別</dt><dd>女子</dd></dl> <dl><dt>性格</dt><dd>活発</dd></dl> </div> <div class="sample_in"> <dl><dt>組名</dt><dd>2組</dd></dl> <dl><dt>性別</dt><dd>男子</dd></dl> <dl><dt>性格</dt><dd>活発</dd></dl> </div> <div class="sample_in"> <dl><dt>組名</dt><dd>1組</dd></dl> <dl><dt>性別</dt><dd>男子</dd></dl> <dl><dt>性格</dt><dd>普通</dd></dl> </div> <p id="nono"> </p> </div> <script type="text/javascript"> function testALL(f) { var div1 = document.getElementById('sample'); var div2 = div1.getElementsByTagName('div'); var str1 = f.elements["select1"].options[f.elements["select1"].selectedIndex].value; var str2 = f.elements["select2"].options[f.elements["select2"].selectedIndex].value; var str3 = f.elements["select3"].options[f.elements["select3"].selectedIndex].value; var nones = "指定なし"; var count = 0; var innerttt = "ごめんなさい<br />該当無し"; document.getElementById('nono').innerHTML = ""; for(var i=0; i<div2.length; i++){ var dd = div2[i].getElementsByTagName("dd"); if( (dd[0].textContent==str1 || dd[0].innerText==str1 || str1==nones) && (dd[1].textContent==str2 || dd[1].innerText==str2 || str2==nones) && (dd[2].textContent==str3 || dd[2].innerText==str3 || str3==nones) ){ div2[i].style.display = ''; }else{ div2[i].style.display = 'none'; count++; } } if( count == div2.length ){ document.getElementById('nono').innerHTML = innerttt; } } </script> </body> </html>