連動プルダウン 確認画面から戻ると初期化される
- 連動プルダウンの選択肢が初期化されてしまう問題について質問します。
- 連動プルダウンの選択肢が戻ると初期状態になってしまうことがあります。どのようにして選択状態を保持することができますか？
- プルダウンの値を保持しながら確認画面から戻る方法について教えてください。
- ベストアンサー
連動プルダウン 確認画面から戻ると初期化される
いつもお世話になります。 javascript初心者です。 以下のページを参考に、プルダウンが連動して選択肢が変わるフォームを作成しました。 http://d.hatena.ne.jp/Mars/20071109 ==HTML ココカラ============================================= <html> <head> <script src="./js/ConnectedSelect.js" type="text/javascript"></script> </head> <body> <form> <select name="sel1" id="SEL1"> <option value="" selected>--------- 選択してください ---------</option> <option value="1" >果物</option> <option value="2" >野菜</option> </select> <select name="sel12" id="SEL2"> <option value="" selected>--------- 選択してください ---------</option> <optgroup label="1"> <option value="1" >モモ</option> <option value="2" >スイカ</option> <option value="3" >ブドウ</option> </optgroup> <optgroup label="2"> <option value="4" >きゅうり</option> <option value="5" >トマト</option> <option value="6" >レタス</option> </optgroup> </select> <script type="text/javascript"> ConnectedSelect(['SEL1','SEL2']); </script> <input type="submit" value="確認"> </form> </body> </html> ==HTML ココマデ============================================= ==ConnectedSelect.js ココカラ============================== function ConnectedSelect(selIdList){ for(var i=0;selIdList[i];i++) { var CS = new Object(); var obj = document.getElementById(selIdList[i]); if(i){ CS.node=document.createElement('select'); var GR = obj.getElementsByTagName('optgroup'); while(GR[0]) { CS.node.appendChild(GR[0].cloneNode(true)); obj.removeChild(GR[0]); } obj.disabled = true; } if(selIdList[i+1]) { CS.nextSelect = document.getElementById(selIdList[i+1]); obj.onchange = function(){ConnectedSelectEnabledSelect(this)}; } else { CS.nextSelect = false; } obj.ConnectedSelect = CS; } } function ConnectedSelectEnabledSelect(oSel){ var oVal = oSel.options[oSel.selectedIndex].value; if(oVal) { while(oSel.ConnectedSelect.nextSelect.options[1])oSel.ConnectedSelect.nextSelect.remove(1); var eF = false; for(var OG=oSel.ConnectedSelect.nextSelect.ConnectedSelect.node.firstChild;OG;OG=OG.nextSibling) { if(OG.label == oVal) { eF = true; for(var OP=OG.firstChild;OP;OP=OP.nextSibling) oSel.ConnectedSelect.nextSelect.appendChild(OP.cloneNode(true)); break; } } oSel.ConnectedSelect.nextSelect.disabled = !eF; } else { oSel.ConnectedSelect.nextSelect.selectedIndex = 0; oSel.ConnectedSelect.nextSelect.disabled = true; } if(oSel.ConnectedSelect.nextSelect.onchange)oSel.ConnectedSelect.nextSelect.onchange(); } ==ConnectedSelect.js ココカラ============================== ちゃんと連動できて喜んでいたのですが、入力画面から確認画面に移動し、修正するために戻ると、子プルダウンの値が初期状態（選択していない状態）に戻ってしまっていました。 こちらを選択した状態を保持しておく方法はないでしょうか。 教えていただけましたら助かります。 よろしくお願いします。
- yako_k
- お礼率77% (62/80)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
普通にやるならCookieをにでも状態を記録してロード時に読みだすことになるのでしょう 両方初期値に戻るようにした方が無難です
関連するQ&A
- 3つの連動したプルダウンメニューのフォームについて
http://d.hatena.ne.jp/Mars/20071109 こちらのページを参考にしてフォームの中身を以下ようにしたいのです。 このような感じです <select id=”SEL1”> <optgroup label=”choise”> <option value=”fruit”>フルーツ</option> <option value=”vegetable”>野菜</option> </select> <select id=”SEL2”> <optgroup label=”fruits”> <option value=”x1”>みかん</option> <option value=”x1”>りんご</option> <option value=”x1”>メロン</option> </optgroup> <optgroup label=”vegetable”> <option value=”x1”>キャベツ</option> <option value=”x1”>きゅうり</option> <option value=”x1”>トマト</option> </optgroup> </select> <select id=”SEL3”> <optgroup label=”x1”> <option>1個</option> <option>2個</option> <option>3個</option> <option>4個</option> <option>5個</option> <option>6個</option> </optgroup> </select> このようにプルダウンメニューを３階層にして、3段階目に繋げる２段階目のoption valueは全て同じにしたいのですが、 そうすると、フォームで送信した結果が select id=SEL2 のところで全てが ”x1”になってしまい各商品の名前を出すことができません。 何か方法があれば教えてください。 使っているジャバスクリプトは以下です function ConnectedSelect(selIdList){ for(var i=0;selIdList[i];i++) { var CS = new Object(); var obj = document.getElementById(selIdList[i]); if(i){ CS.node=document.createElement('select'); var GR = obj.getElementsByTagName('optgroup'); while(GR[0]) { CS.node.appendChild(GR[0].cloneNode(true)); obj.removeChild(GR[0]); } obj.disabled = true; } if(selIdList[i+1]) { CS.nextSelect = document.getElementById(selIdList[i+1]); obj.onchange = function(){ConnectedSelectEnabledSelect(this)}; } else { CS.nextSelect = false; } obj.ConnectedSelect = CS; } } function ConnectedSelectEnabledSelect(oSel){ var oVal = oSel.options[oSel.selectedIndex].value; if(oVal) { while(oSel.ConnectedSelect.nextSelect.options[1])oSel.ConnectedSelect.nextSelect.remove(1); var eF = false; for(var OG=oSel.ConnectedSelect.nextSelect.ConnectedSelect.node.firstChild;OG;OG=OG.nextSibling) { if(OG.label == oVal) { eF = true; for(var OP=OG.firstChild;OP;OP=OP.nextSibling) oSel.ConnectedSelect.nextSelect.appendChild(OP.cloneNode(true)); break; } } oSel.ConnectedSelect.nextSelect.disabled = !eF; } else { oSel.ConnectedSelect.nextSelect.selectedIndex = 0; oSel.ConnectedSelect.nextSelect.disabled = true; } if(oSel.ConnectedSelect.nextSelect.onchange)oSel.ConnectedSelect.nextSelect.onchange(); }
- 締切済み
- JavaScript
- javascriptで選択肢が分かれるプルダウンでcgiにデータを送るには？
下記のように、javascriptで選択肢が変化するプルダウンを使用してcgiにデータを送りたいのですが、この方法ですと一番最初の選択肢である「果物・肉」の部分のデータしかcgiに送れません。 例えば「果物・梨・20世紀梨」や「肉・鶏肉・比内地鶏」というように、選択したすべてのデータをcgiに送れるようにするにはどうすればよいのでしょうか？ 分かりづらい説明で申し訳ありません。 補足説明致しますので、どうかご教授下さいますようお願い致します。 以下がサンプルソースです。 <html> <head> <script type="text/javascript"> <!-- function ConnectedSelect(selIdList){ for(var i=0;selIdList[i];i++) { var CS = new Object(); var obj = document.getElementById(selIdList[i]); if(i){ CS.node=document.createElement('select'); var GR = obj.getElementsByTagName('optgroup'); while(GR[0]) { CS.node.appendChild(GR[0].cloneNode(true)); obj.removeChild(GR[0]); } obj.disabled = true; } if(selIdList[i+1]) { CS.nextSelect = document.getElementById(selIdList[i+1]); obj.onchange = function(){ConnectedSelectEnabledSelect(this)}; } else { CS.nextSelect = false; } obj.ConnectedSelect = CS; } } function ConnectedSelectEnabledSelect(oSel){ var oVal = oSel.options[oSel.selectedIndex].value; if(oVal) { while(oSel.ConnectedSelect.nextSelect.options[1])oSel.ConnectedSelect.nextSelect.remove(1); var eF = false; for(var OG=oSel.ConnectedSelect.nextSelect.ConnectedSelect.node.firstChild;OG;OG=OG.nextSibling) { if(OG.label == oVal) { eF = true; for(var OP=OG.firstChild;OP;OP=OP.nextSibling) oSel.ConnectedSelect.nextSelect.appendChild(OP.cloneNode(true)); break; } } oSel.ConnectedSelect.nextSelect.disabled = !eF; } else { oSel.ConnectedSelect.nextSelect.selectedIndex = 0; oSel.ConnectedSelect.nextSelect.disabled = true; } if(oSel.ConnectedSelect.nextSelect.onchange)oSel.ConnectedSelect.nextSelect.onchange(); } --> </script> </head> <body> <form method="POST" action="http://www.●●.com/●●.cgi"> <input type="hidden" name="mode" value="regist" /> <select name="item" id="sel1"> <option value="果物">果物</option> <option value="肉">肉</option> </select> <select name="" id="sel2"> <optgroup label="果物"> <option value="梨">梨</option> <option value="りんご">りんご</option> </optgroup> <optgroup label="肉"> <option value="牛肉">牛肉</option> <option value="鶏肉">鶏肉</option> </optgroup> </select> <select name="" id="sel3"> <optgroup label="梨"> <option value="20世紀梨">20世紀梨</option> <option value="ラフランス">ラフランス</option> </optgroup> <optgroup label="りんご"> <option value="ふじ">ふじ</option> <option value="つがる">つがる</option> </optgroup> <optgroup label="牛肉"> <option value="和牛">和牛</option> <option value="アメリカ牛">アメリカ牛</option> </optgroup> <optgroup label="鶏肉"> <option value="名古屋コーチン">名古屋コーチン</option> <option value="比内地鶏">比内地鶏</option> </optgroup> </select> <script type="text/javascript"> ConnectedSelect(['sel1','sel2','sel3']); </script> <input type="submit"></form> </body> </html>
- ベストアンサー
- JavaScript
- 連動プルダウンのリンクについて
はじめまして。 javascriptをはじめて間もない初心者になりますがよろしくお願いします。 質問内容に不備がありましたら申し訳ございません。 まず行いたいことですが、ここを参考に連動プルダウンを作成しました。 http://d.hatena.ne.jp/Mars/20071109 これを元に選んだ項目によって別ウィンドウにてリンクを表示したいのですが、うまくいかずご質問させていただきました。 リンク項目は決まっておりません。例えば3項目目にあったり2項目目にあったりと。 urlをvalueに入れて参照するからと思い以下を作成してみました。 <script type="text/javascript"><!-- function jump(thisForm){ location.href = thisForm.options[thisForm.options.selectedIndex].value; } //--></script> <form name="thisForm"> <select id="SEL1"> <option value="">---</option> <option value="XXX">XXX</option> <option value="YYY">YYY</option> <option value="ZZZ">ZZZ</option> </select> <select id="SEL2"> <option value="">---</option> <optgroup label="XXX"> <option value="x1">x1</option> <option value="x2">x2</option> </optgroup> <optgroup label="YYY"> <option value="y1">y1</option> <option value="y2">y2</option> </optgroup> <optgroup label="ZZZ"> <option value="z1">z1</option> <option value="z2">z2</option> </optgroup> </select> <select id="SEL3"> <option value="">---</option> <optgroup label="x1"> <option value="x1a">x1a</option> <option value="x1b">x1b</option> </optgroup> <optgroup label="x2"> <option value="x2a">x2a</option> <option value="x2b">x2b</option> </optgroup> <optgroup label="y1"> <option value="y1a">y1a</option> <option value="xxx.xxx.html">y1b</option> </optgroup> <optgroup label="y2"> <option value="y2a">y2a</option> <option value="y2b">y2b</option> </optgroup> <optgroup label="z1"> <option value="z1a">z1a</option> <option value="z1b">z1b</option> </optgroup> <optgroup label="z2"> <option value="***.***.html">z2a</option> <option value="z2b">z2b</option> </optgroup> <input type=button value="GO" onClick="Jump(this.form)"> </form> </select> <script type="text/javascript"> ConnectedSelect(['SEL1','SEL2','SEL3']); </script> この場合にボタンを押してリンクをさせたかったのですが、エラーが表示されエラーを参照して調べたのですが、どこをどう直せばいいのか、全く間違っているのかも分からず質問させていただきました。ネットでも調べてみたのですが、どの方法が一番合うかも分かりませんでした。 拙い文章で申し訳ないですが、ご教授いただけますでしょうか？ よろしくお願い致します。
- ベストアンサー
- JavaScript
- プルダウン連動とリンク
選択項目により連動するプルダウンを利用し、各々のページにリンクさせようと思っているのですが、上手くいきません。 一つ目のプルダウンで項目を選択⇒二つ目のプルダウンに項目が表示される⇒選択するとリンクする。 プルダウンはこちらのソースを利用しています。 http://d.hatena.ne.jp/Mars/20071109 連動リンクはこちらを参考にしました。 http://air.rulez.jp/shop/java/jt_pulldown.htm 現在のソースは下記のようになっています。 プルダウンの連動とリンク、それぞれ単体での動作確認は出来たのですが、組み合わせると上手くいきません。 最初のプルダウンで「YYY」を選択し、連動して次のプルダウンに表示される「yahooかgoogle」を選択したらURL先にリンクしたいのですが。 現在はプルダウンは連動はされるものの、2つめのプルダウンで項目を選択しても何も起こらない状態です。 ----------------------------------------------------------------- <script type="text/javascript" src="ConnectedSelect.js"></script> <form> <select id="SEL1"> <option value="XXX">XXX</option> <option value="YYY">YYY</option> </select> <select id="SEL2" onChange="top.location.href=value"> <optgroup label="XXX"> <option value="x1">x1</option> <option value="x2">x2</option> </optgroup> <optgroup label="YYY"> <option value="http://www.yahoo.co.jp/">yahoo</option> <option value="https://www.google.co.jp/">google</option> </optgroup> </select> </form> <script type="text/javascript"> ConnectedSelect(['SEL1','SEL2','SEL3']); </script> --------------------------------------------------------------- これはどのように修正すればリンクされるようになるでしょうか？ また別の方法があればそちらでも構いません。 ご存知の方いらっしゃいましたらご教示ください。 よろしくお願いします。
- 締切済み
- JavaScript
- プルダウンメニューに連動するdisableの切替で
以前こちらで、selectメニューに連動するdisableの切替方法をお聞きして、下記のようなものを作成しました。 ここでCGIの仕様上、selectメニュー内のvalue値に日本語（1単語）を使用したいと思い、value値以外の値を取得しようとしてみましたが、うまくいきません。 何かよい方法はありますでしょうか？ <html> <head> <script type="text/javascript"> window.onload = function(){ disableAllGr(); } function disableAllGr(){ var inputList = document.getElementsByTagName('p'); for(var i=0;i<inputList.length;i++){ var obj=inputList[i]; if(obj.id.match(/^gr_/)){ var n=obj.firstChild; while(n){ if(n.nodeName=="INPUT" && n.type=="radio") n.disabled=true; if(n.nodeName=="INPUT" && n.type=="checkbox") n.disabled=true; if(n.nodeName=="INPUT" && n.type=="text") n.disabled=true; if(n.nodeName=="SELECT") n.disabled=true; n=n.nextSibling; } } } } function fchk2(obj) { disableAllGr(); var nameList = obj.value.split(/,/); for( var i in nameList){ if(!document.getElementById('gr_'+nameList[i])) return false; var n=document.getElementById('gr_'+nameList[i]).firstChild; while(n){ if(n.nodeName=="INPUT" && n.type=="radio") n.disabled=false; if(n.nodeName=="INPUT" && n.type=="checkbox") n.disabled=false; if(n.nodeName=="INPUT" && n.type=="text") n.disabled=false; if(n.nodeName=="SELECT") n.disabled=false; n=n.nextSibling; } } } </script> </head> <body> <form> <p id="ctr_FLAG"> <select onchange='fchk2(this)'> <option selected="selected" value="">選んでください</option> <option value="A,A2">Aをアクティブ</option> <option value="A,A2,B,B2">AとBをアクティブ</option> <option value="A,A2,B,B2,C,C2">AとBとCをアクティブ</option> </select> </p> <p>A---------------------</p> <p id="gr_A"> <input type="radio" value="2mm" />テストA <input type="radio" value="3mm" />テストAA </p> <p id="gr_A2"> <input type="checkbox" value="2mm" /> テストA <input type="checkbox" value="3mm" /> テストAA </p> <p>B-----------------------</p> <p id="gr_B"> <input type="radio" value="2mm" />テストB <input type="radio" value="3mm" />テストBB </p> <p id="gr_B2"> <input type="checkbox" value="2mm" />テストB <input type="checkbox" value="3mm" />テストBB </p> <p>C-----------------------</p> <p id="gr_C"> <input type="radio" value="2mm">テストC <input type="radio" value="3mm"/>テストCC </p> <p id="gr_C2"> <input type="checkbox" value="2mm"> テストC <input type="checkbox" value="3mm"/>テストCC </p> <p>-----------------------</p> <p><input type="submit"></p> </form> </body> </html>
- ベストアンサー
- JavaScript
- いつも参考にさせて頂いています。
いつも参考にさせて頂いています。 javascriptでセレクトメニューを作っているのですが うまく出来ないのでどなたか教えて下さい。 宜しくおねがいします。 ３連動するセレクトメニューで ３つ目のセレクトメニューを選ぶと 選ばれた項目に対応するURLに飛ぶように作っています。 ここからが質問なのですが、 ページに飛んだ時にセレクトメニューで選択した内容が消えてしまいます・・・ 飛んだ先のページでも、選択した内容を表示させるには どのようにすればいいのでしょうか？ ご存知の方がいましたら教えて下さい。 ---html部分---- <html> <head> <script type="text/javascript" src="test.js"></script> </head> <body> <form id="f0"> <select id="s0"> <option value="">----------------</option> </select> <select id="s1"> <option value="">----------------</option> </select> <select id="s2"> <option value="">----------------</option> </select> </form> </body> </html> ---外部javascriptファイル---- var data= { 吉野家: { "牛丼(並)":{0:"380円"}, "牛丼(大盛)":{1:"480円"}, "牛丼(特盛)":{2:"630円"} } ,松屋: { "牛丼(並)":{3:"320円"}, "牛丼(大盛り)":{4:"420円"}, "牛丼(特盛)":{5:"520円"} } ,すき家: { "牛丼(並)":{6:"280円"}, "牛丼(大盛)":{7:"380円"}, "牛丼(特盛)":{8:"480円"} }; window.onload=function(){ s0=document.getElementById("s0"); s1=document.getElementById("s1"); s2=document.getElementById("s2"); setSelect(data,s0); s0.onchange=function(){ clearSelect(s2); if(this.value==""){ clearSelect(s1); }else{ setSelect(data[this.value],s1); } } s1.onchange=function(){ if(this.value==""){ clearSelect(s2); }else{ setSelect(data[s0.value][this.value],s2); } } s2.onchange=function(){ location.href="/////////"; } } function setSelect(obj,sel){ while(lc=sel.lastChild){ sel.removeChild(lc); }; var op=document.createElement("option"); op.setAttribute("value",""); op.appendChild(document.createTextNode("----------------")); sel.appendChild(op); for(var i in obj){ var txt=(typeof obj[i]=="object")?i:obj[i]; var op=document.createElement("option"); op.setAttribute("value",i); op.appendChild(document.createTextNode(txt)); sel.appendChild(op); } } function clearSelect(sel){ while(lc=sel.lastChild){ sel.removeChild(lc); }; var op=document.createElement("option"); op.appendChild(document.createTextNode("----------------")); sel.appendChild(op); };
- ベストアンサー
- JavaScript
- プルダウンのリンクについて
javascriptで以前にもリンクについて質問させていただいたものです。 http://okwave.jp/qa4980697.html この質問で丁寧に回答いただいたのですが、私の知識(理解力)不足の為、自分の思ったような動作をしなかったため再度質問させていただきました。 質問としては、「.html」拡張子のみをリンクとして別ウィンドウに表示したいということです。それ以外の拡張子はございません。 自分で作成したソースを記載致しますので修正点等をご教授ください。 何分初心者なので全く検討違いな構文になっているかと思いますが、ご容赦ください。 <script type="text/javascript"><!-- function Jump(){ if (str.match(/\.html?$/)) window.open(str,'_blank'); } //--></script> <body> <title>test</title> <form name="form"> <select name="SEL1"> <option value="">-----------</option> <option value="aa">aa</option> <option value="bb">bb</option> </select> <select name="SEL2"> <option value="">-----------</option> <optgroup label="aa"> <option value="aa1">aa1</option> <option value="aa2">aa2</option> </optgroup> <optgroup label="bb"> <option value="bb1">bb1</option> <option value="bb2">bb2</option> </optgroup> </select> <select name="SEL3"> <option value="">-----------</option> <optgroup label="aa1"> <option value="aa3">aa3</option> <option value="xxx.xxx.html">リンク</option> </optgroup> </select> ～省略～ <select name="SEL10"> <option value="">-----------</option> <optgroup label="xx"> <option value="xx1">xx1</option> <option value="yyy.yyy.html">リンク2</option> </optgroup> </select> <input type=button value="go" onClick="Jump()"> </form> としたのですが、エラーで ライン：8(<html><body>があるため) 文字：14 エラー：'str'は宣言されていません。 と表示されてしまいます。 前回fujillin様に丁寧に解説していただき参考サイトまでご教授いただいたのですが、拡張子を特定して判別するという作業が理解できず再度質問させていただきました。どのようにfunction部分を構成すればリンクとして表示できるようになりますでしょうか？ご面倒なことで申し訳ないですが、よろしくご教授お願い致します。
- ベストアンサー
- JavaScript
- Stack overflow line at:0のエラーについて
はじめまして。 先日も質問させていただき、見事に解決できたのでまた質問させていただきます。 タイトルにもあるのですが、連動プルダウンを使用したJavascriptでエラーが出てしまいます。ネットでも色々と調べ呼び出しのメモリが不足している、キャッシュが多いなど載っていましたが、どうもPCそのものの問題ではないようです。 それ以外では構文のエラーということだったのでフリーソフトのエラーチェックを行ったのですが、特に問題はなかったです。 プルダウンは全部で20個あり初めの4個は選択後に次のプルダウンに移行すると必ずStack overflowのエラーがでます。 不躾な質問で申し訳ないですが、何か問題があるのかご教授いただけないでしょうか？ よろしくお願いします。 以下は構文になります。 <html> <head> <title>テンプレtest</title> <script type="text/javascript"src="ConnectedSelect.js"></script> <script> function Jump(f){ for(var i=0;i<f.length;i++){ if(f[i].type=="select-one" && f[i].value.match(/\.html?$/)){ window.open(f[i].value,'_blank'); break; } } } </script> </head> <body> <form> 項目1<select name="SEL1"> <option value="">-----------</option> <option value="aa">aa</option> </select> 項目2<select name="SEL2"> <option value="">-----------</option> <optgroup label="aa"> <option value="aa1">aa1</option> <option value="aa2">aa2</option> <option value="bb1">bb1</option> </optgroup></select> ・ ・ ・ ・ 項目20<select name="SEL20"> <option value="">-----------</option> <optgroup label="zz"> <option value="zz1">zz1</option> <option value="zz2">zz2</option> <option value="***.html">***</option> </optgroup></select> <input type="button" value="Go" onClick="Jump(this.form)"> <script type="text/javascript">ConnectedSelect (['SEL1','SEL2','SEL3','SEL4','SEL5','SEL6','SEL7','SEL8','SEL9','SEL10','SEL11','SEL12','SEL13','SEL14','SEL15','SEL16','SEL17','SEL18','SEL19','SEL20']); </script> </form> </center> </body> </html>
- ベストアンサー
- JavaScript
- 複数プルダウンでメニューを初期表示に戻したい
No.157334でleaz024さんに「複数プルダウンメニュー」について教えてもらったものですが、ひとつ、追加したいことがあるので教えてください。 教えていただいたスクリプトは <script language="javascript"> <!-- function A_Li() { Sel=document.Link1.OP.selectedIndex; Ms=document.Link1.OP.options[Sel].value; parent.main.location.href=Ms;} function B_Li() { Sel=document.Link1.OP2.selectedIndex; Ms=document.Link1.OP2.options[Sel].value; parent.main.location.href=Ms;} // --> </script> <FORM name="Link1"> <SELECT name="OP" onChange="A_Li()" size="1"> <OPTION Value="main.htm" SELECTED>ページを選んでください <option value="main.htm">ぺージ1</option> <OPTION Value="abc.htm">ページ2 <OPTION Value="def.htm">ページ3 </SELECT> <SELECT name="OP2" onChange="B_Li()" size="1"> <OPTION Value="aaa.htm" SELECTED>ページを選んでください <option value="bbb.htm">ぺージ1</option> <OPTION Value="ccc.htm">ページ2 <OPTION Value="ddd.htm">ページ3 </SELECT> です。 例えば OP2のメニューをクリックしたあと OP3のメニューをクリックしたときにOP2のメニューが初期の 表示メニューに戻したいのですが、どう変えればよいでしょうか。 初心者なので本を見てみたのですがわかりませんでした。 どうぞよろしくお願いいたします。
- ベストアンサー
- JavaScript
- ラジオボタンとプルダウンを連動させたい
ラジオボタンとプルダウンを連動させたい いつもお世話になっております。 ラジオボタンのvalue値に連動してプルダウンの内容が変わるということがしたいと思い、 数日前からいろいろと格闘していましたが、煮詰まったため相談に伺いました。 http://okwave.jp/qa/q2928590.htmlのANo.2の回答 -------------------------------------------------------------------- <script language="javascript"> function changeFunc(obj){ var v=obj.value; var f=obj.form; for(var i=0;i<f.length;i++){ if(f[i].type=="checkbox"){ if(f[i].className==v || v=="") f[i].disabled=false; else f[i].disabled=true; } } } </script> <form> <select name="genre" onChange="changeFunc(this)"> <option value="">食べ物</option> <option value="grain">穀物</option> <option value="fruit">果物</option> <option value="meat">生き物</option> </select> <br /> <input type="checkbox" value="お米" class="grain">お米<br /> <input type="checkbox" value="そば" class="grain">そば<br /> <input type="checkbox" value="りんご" class="fruit">りんご<br /> <input type="checkbox" value="みかん" class="fruit">みかん<br /> <input type="checkbox" value="さかな" class="meat">さかな<br /> <input type="checkbox" value="豚肉" class="meat">豚肉 </form> -------------------------------------------------------------------- を参考にいろいろと試してはみたのですが、こちらは「プルダウン→チェックボックス」で、 まったく逆でどうしたら良いのかまったくわかりませんでした。 他のウェブサイトの情報やサンプルも試したのですが、value値やname値他の問題でうまくできませんでした。 希望の仕様は ・ラジオボタンの選択肢によって、プルダウン（セレクトボックス）の内容が変わる（アイテムが消える、または選択できなくなる）。 ・ラジオボタン・プルダウン共にvalue値・name値は決まったものがある（プルダウンのvalue値は日本語） 以上です。 javascriptは素人ですので、わかりにくい質問になっているかもしれないのですが、お力を貸していただけましたら助かります。 よろしくお願いします。
- ベストアンサー
- JavaScript
お礼
ご回答ありがとうございます。御礼がすっかり遅くなってしまい、申し訳ありませんでした。 いろいろと試行錯誤した結果、両方初期値に戻して運営することにしました。 本当にありがとうございました。