• ベストアンサー

プルダウンメニューに連動する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>

質問者が選んだベストアンサー

  • ベストアンサー
noname#84373
noname#84373
回答No.2

<html> <head> <script type="text/javascript"> window.onload=fchk2; function fchk2(elm) { n=[0,1,3,7][elm?elm.selectedIndex:0]; disb('s1',n&1); disb('s2',n&2); disb('s3',n&4); } function disb(obj,tf){ o=document.getElementById(obj).firstChild; while(o){ if(o.nodeName=='INPUT') o.disabled=tf?false:true; o=o.nextSibling; } } </script> </head> <body> <form id="abcd"> <select onchange='fchk2(this)'> <option selected="selected" value="">選んでください</option> <option value="ホンダ">ホンダをアクティブ</option> <option value="トヨタとトヨタ">ホンダとトヨタをアクティブ</option> <option value="日産"とホンダとトヨタ>すべてをアクティブ</option> </select> </p> <div id="s1">ホンダ---------------------<br> <input type="radio" name="a0" value="2mm" />テストA <input type="radio" name="a0" value="3mm" />テストAA <input type="checkbox" id="a1" value="2mm" /> テストA <input type="checkbox" id="a2" value="3mm" /> テストAA </div> <div id="s2">トヨタ---------------------<br> <input type="radio" name="b0" value="2mm" />テストB <input type="radio" name="b0" value="3mm" />テストBB <input type="checkbox" id="b1" value="2mm" />テストB <input type="checkbox" id="b2" value="3mm" />テストBB </div> <div id="s3">日産---------------------<br> <input type="radio" name="c0" value="2mm">テストC <input type="radio" name="c0" value="3mm"/>テストCC <input type="checkbox" id="c1" value="2mm"> テストC <input type="checkbox" id="c2" value="3mm"/>テストCC </div> <p><input type="submit"></p> </form> </body> </html>

btnistho
質問者

お礼

ソースまで改修していただいて、ありがとうございます。 思った通りの表現ができそうです。

その他の回答 (1)

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

なにを質問しているのかわからないのですが selectのoptionのvalueを適当なものにかえたときに pのidに対応したdisabledの設定をしたいのかなぁ・・ objectで、対比表をつくれば一発だとおもいますけど

btnistho
質問者

お礼

ありがとうございます。間抜けな質問ですみません。 おかげさまで、うまくいきました。

関連するQ&A

  • フォームの戻るボタンについて

    もしかするとカテゴリ違いかもしれませんが、質問させていただきます。 JavaScriptでユーザがボタンのアクティブ・非アクティブの制御ができるフォームを作成し、サーバサイドで処理し(Perl使用)、確認画面を表示しているのですが、その際、 onClick="history.back()"で元のページに戻る遷移を考えていたのですが、元のページに戻った際にアクティブ・非アクティブの制御が初期状態に戻ってしまいます(IE6or7)。 確認画面から元のページに戻った時にユーザが設定した状態をキープしたまま表示させたいと思っています。 サーバサイドで処理しようともしましたが、どうもうまくいきません。 どなたか良い方法をご存知の方がいらっしゃいましたらご教授願えないでしょうか? (例えば下記のようなページから確認画面を経由して戻るような場合です。) <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> </select> </p> <p>A---------------------</p> <p id="gr_A"> <select> <option>A</option> <option>AA</option> </select> </p> <p id="gr_A2"> <input type="radio" value="2mm" /> テストA <input type="radio" value="3mm" /> テストAA </p> <p>B-----------------------</p> <p id="gr_B"> <select> <option>B</option> <option>BB</option> </select> </p> <p id="gr_B2"> <input type="radio" value="2mm" /> テストB <input type="radio" value="3mm" /> テストBB </p> <p>-----------------------</p> <p><input type="submit"></p> </form> </body> </html>

  • ラジオボタンとプルダウンを連動させたい

    ラジオボタンとプルダウンを連動させたい いつもお世話になっております。 ラジオボタンの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は素人ですので、わかりにくい質問になっているかもしれないのですが、お力を貸していただけましたら助かります。 よろしくお願いします。

  • ラジオボタンが選択によるチェックボックス・ボタンの制御方法

    お世話になります。 やりたい事 (1)ラジオボタン【小学校】:小学校のみ入力可 (2)ラジオボタン【中学校】:中学校(市立・私立)のみ入力可 (3)ラジオボタン【全ての学校】:小中すべて入力可 (1)と(2)は動作していると思います。 (3)を実現するにはどうすればいいのでしょうか? よろしくお願いします。 <html> <head> <title>ラジオボタンが選択されたらチェックボックス・ボタンを入力可能にする</title> <script Language="JavaScript"><!-- function setRTF(f,n){ for(var i=0; i<f.length; i++){ var p=f[i].parentNode; var pid=""; while(p){ if(p.nodeName=="TD"){pid=p.id;break;} p=p.parentNode; } if(f[i].type=="checkbox" || f[i].type=="button") f[i].disabled=pid!=n; } } function allcheck(obj,flag){ var target=obj.parentNode.getElementsByTagName("input"); for(var i=0;i<target.length;i++){ if(target[i].type=="checkbox") target[i].checked=flag; } } // --></script> </head> <body> <form> <table border="1" width="303"> <tr> <td width="89"><input type="radio" name="mm" onClick="setRTF(this.form,'aa')">小学校</td> <td width="90"><input type="radio" name="mm" onClick="setRTF(this.form,'bb')">中学校</td> <td width="102"><input type="radio" name="mm" onClick="setRTF(this.form,'xx')">全ての学校</td> </tr> <tr> <td id="aa" rowspan="2" width="89"> <input type="checkbox" name="aa[]" value="1" disabled>A小学校<br> <input type="checkbox" name="aa[]" value="2" disabled>B小学校<br> <input type="checkbox" name="aa[]" value="3" disabled>C小学校<br> <input type="button" value="全選択" onClick="allcheck(this,true)"/ disabled ><br> <input type="button" value="全解除" onClick="allcheck(this,false)" disabled /> </td> <td id="bb" width="90"> 市立<br> <input type="checkbox" name="bb[]" value="1" disabled>A中学校<br> <input type="checkbox" name="bb[]" value="2" disabled>B中学校<br> <input type="checkbox" name="bb[]" value="3" disabled>C中学校<br> <input type="button" value="全選択" onClick="allcheck(this,true)" disabled /><br> <input type="button" value="全解除" onClick="allcheck(this,false)" disabled /> </td> <td id="cc" rowspan="2" width="102"> </td> </tr> <tr> <td id="bb" width="90"> 私立<br> <input type="checkbox" name="cc[]" value="1" disabled>A中学校<br> <input type="checkbox" name="cc[]" value="2" disabled>B中学校<br> <input type="checkbox" name="cc[]" value="3" disabled>C中学校<br> <input type="button" value="全選択" onClick="allcheck(this,true)" disabled /><br> <input type="button" value="全解除" onClick="allcheck(this,false)" disabled /> </td> </tr> </table> </form> </body> </html>

  • selectメニューによるチェックボックスの表示・非表示

    リストメニューで選択された項目がアクティブになるようなフォームを作成したいと考えています。 下記コードの上部チェックボックスがselectメニューになっているようなものです。 JavaScriotに関して未熟者ですので、どなたか参考になるご意見/回答を頂けませんでしょうか?宜しくお願いいたします。 <html> <head> <title></title> <script type="text/javascript"> <!-- // 制御用フラグ // 0なら対象グループは無効(disabled)、1以上なら有効 var FLAG = { 'A':0, 'B':0, 'C':0, 'E':0 }; // 初期化 window.onload = function(){ var controlList = document.getElementById('ctr_FLAG').getElementsByTagName('input'); for(var i=0;controlList[i];i++){ if(controlList[i].checked){ var nameList = controlList[i].value.split(/,/); for(var j=0;nameList[j];j++){ FLAG[ nameList[j] ]++; } } } for(var x in FLAG) { fchk2_sub(x); } } // チェックが変更されたら function fchk2(obj) { nameList = obj.value.split(/,/); for(var i=0;nameList[i];i++) { if(obj.checked) { FLAG[nameList[i]]++; } else { FLAG[nameList[i]]--; } fchk2_sub(nameList[i]); } } // disableの変更 function fchk2_sub(groupe_name,dsiabled_value){ var inputList = document.getElementById('gr_'+groupe_name).getElementsByTagName('input'); for(var i=0;inputList[i];i++) { inputList[i].disabled = FLAG[groupe_name]>0?false:true; } } //--> </script> </head> <body> <form name='form2' action='#'> <p id="ctr_FLAG"> <input type='checkbox' name='chk1' value='A' onclick='fchk2(this)' > Aをアクティブに<br> <input type='checkbox' name='chk1' value='A,B' onclick='fchk2(this);' > AとBをアクティブに<br> <input type='checkbox' name='chk1' value='A,B,C' onclick='fchk2(this);'> AとBとCをアクティブに<br> <input type='checkbox' name='chk12' value='A,B,C,E' onclick='fchk2(this);'> AとBとCとDをアクティブに</p> <p>=====================</p> <p id="gr_A"> <input type='checkbox' name='a1' value='1'> 選択肢A<br> <input type='checkbox' name='a2' value='1'> 選択肢A<br> <input type='checkbox' name='a3' value='1'> 選択肢A<br> </p> <p id="gr_B"> <input type='checkbox' name='b1' value='1'> 選択肢B<br> <input type='checkbox' name='b2' value='1'> 選択肢B<br> <input type='checkbox' name='b3' value='1'> 選択肢B<br> </p> <p id="gr_C"> <input type='checkbox' name='c1' value='1'> 選択肢C<br> <input type='checkbox' name='c2' value='1'> 選択肢C<br> <input type='checkbox' name='c3' value='1'> 選択肢C<br> </p> <p id="gr_E"> <input type='checkbox' name='e1' value='1'> 選択肢E<br> <input type='checkbox' name='e2' value='1'> 選択肢E<br> <input type='checkbox' name='e3' value='1'> 選択肢E </p> </form> </body> </html>

  • チェックボタンの制御方法

    チェックボタンの制御方法で 下記のようなことがやりたいです。 (1)【全ての学校】選択時 【小学校】と【中学校】の全て disabledのままでチェックをセット、ボタンdisabled (2)【小学校】選択時 【中学校】disabledのままでチェックを解除、ボタンdisabled (3)【中学校】選択時 【小学校】disabledのままでチェックを解除、ボタンdisabled もうちょっとだと思うのですが... なかなかうまく出来ないのでよろしくお願いします。 <html> <head> <title></title> <script Language="JavaScript"><!-- function setRTF(f,n){ for(var i=0; i<f.length; i++){ var p=f[i].parentNode; var pid=""; while(p){ if(p.nodeName=="TD"){pid=p.id;break;} p=p.parentNode; } if(f[i].type=="checkbox" || f[i].type=="button") f[i].disabled=pid!=n; } } function allcheck(obj,flag){ var target=obj.parentNode.getElementsByTagName("input"); for(var i=0;i<target.length;i++){ if(target[i].type=="checkbox") target[i].checked=flag; } } // --></script> </head> <body> <form> <table border="1" width="303"> <tr> <td width="89"><input type="radio" name="mm" onClick="setRTF(this.form,'aa')">小学校</td> <td width="90"><input type="radio" name="mm" onClick="setRTF(this.form,'bb')">中学校</td> <td width="102"><input type="radio" name="mm" onClick="setRTF(this.form,'xx')">全ての学校</td> </tr> <tr> <td id="aa" rowspan="2" width="89"> <input type="checkbox" name="aa[]" value="1" disabled>A小学校<br> <input type="checkbox" name="aa[]" value="2" disabled>B小学校<br> <input type="checkbox" name="aa[]" value="3" disabled>C小学校<br> <input type="button" value="全選択" onClick="allcheck(this,true)"/ disabled ><br> <input type="button" value="全解除" onClick="allcheck(this,false)" disabled /> </td> <td id="bb" width="90"> 市立<br> <input type="checkbox" name="bb[]" value="1" disabled>A中学校<br> <input type="checkbox" name="bb[]" value="2" disabled>B中学校<br> <input type="checkbox" name="bb[]" value="3" disabled>C中学校<br> <input type="button" value="全選択" onClick="allcheck(this,true)" disabled /><br> <input type="button" value="全解除" onClick="allcheck(this,false)" disabled /> </td> <td id="cc" rowspan="2" width="102"> </td> </tr> <tr> <td id="bb" width="90"> 私立<br> <input type="checkbox" name="cc[]" value="1" disabled>A中学校<br> <input type="checkbox" name="cc[]" value="2" disabled>B中学校<br> <input type="checkbox" name="cc[]" value="3" disabled>C中学校<br> <input type="button" value="全選択" onClick="allcheck(this,true)" disabled /><br> <input type="button" value="全解除" onClick="allcheck(this,false)" disabled /> </td> </tr> </table> </form> </body> </html>

  • 確認ページからフォームページに「戻る」時の入力内容の保持

    ラジオボタンと連動したチェックボックスがあります。 ラジオボタンを選択し、さらにチェックボックスに入力後、「確認」をクリックして確認ページから「戻る」の時にチェックボックスの入力内容の値が保持されておらず、困っています。 Firefoxではきちんと動作するのですが、IEなど他のブラウザでは動作しません。 入力内容を保持する方法はありますでしょうか? <script> window.onload=function(){ var f0=document.getElementById("f0"); try{ f0.addEventListener("click",function(e){func(e)},true); }catch(e){ f0.attachEvent("onclick",function(e){func(e)}); } } function func(e){ var obj= (e.srcElement || e.target); if(obj.nodeName!="INPUT") return false; switch(obj.type){ case "radio": setRadio(obj); break; case "checkbox": setCheckbox(obj,"シルク","Kind04[]","SELECT"); break; } } function setRadio(obj){ var n=obj.parentNode.firstChild; while(n){ if(n.nodeName=="INPUT" && n.type=="checkbox"){ n.disabled=obj.value!="アリ"; n.checked=false; } if(n.nodeName=="SELECT"){ n.disabled=true; n.selectedIndex=0; } n=n.nextSibling; } } function setCheckbox(obj,v,n,nn){ if(obj.value!=v) return false; var node=obj.parentNode.firstChild; while(node){ if(node.nodeName==nn && node.name==n){ node.disabled=!obj.checked; node.selectedIndex=0; } node=node.nextSibling; } } </script> </head> <body> <form action="./postmail.cgi" name="f0" method="post" id="f0"> <fieldset> <legend>■分類</legend> <input type="radio" value="ナシ" name="print" class="print" checked>ナシ <input type="radio" value="アリ" name="print" class="print" >アリ  ( <input type="checkbox" value="銀シールド" name="Kind04[]" class="Kind04" disabled>銀シールド <input type="checkbox" value="銀ペースト" name="Kind04[]" class="Kind04" disabled>銀ペースト <input type="checkbox" value="銅ペースト" name="Kind04[]" class="Kind04" disabled>銅ペースト <input type="checkbox" value="シルク" name="Kind04[]" class="Kind04" disabled>シルク  色 <SELECT name="Kind04[]" class="Kind04" disabled> <OPTION SELECTED VALUE="---">--- <OPTION VALUE="白">白 <OPTION VALUE="黒">黒 <OPTION VALUE="他">他 </SELECT> ) </fieldset><br> <input type="submit" value="確認する" />  <input type="reset" value="リセット" /> </form> </body> </html>

  • チェックボックスとラジオボタンのdisable/enable連動

    文末ソースの通り (1) 分類グループ、(2) すいかグループ、(3) 色グループ というフォーム類があります。 これを次のような法則性でdisable/enableを切り替えたいです。 (1) 初期値で、「すいかグループ」と「色グループ」はdisabled。 (2) 「果物」がONの間だけ「すいかグループ」がenable(初期値で「含む」をON)   ここで「色グループ」はまだdisabledのまま。 (3) 「除く」がONの時のみ、「色グループ」もenable。他の「含む」「のみ」を選択中、  「色グループ」は常にdisabled。 (4) 「色グループ」が一つ以上チェックされている間、「分類グループ」の   「肉」「魚」「穀物」「飲料」はdisabled。   「色グループ」がdisableである間、「肉」~「飲料」は常にenable。 昨日も類似質問nご教示いただき(解決済み)、 本件に応用を試みましたが、(4) でつまづきました。 よろしくお願い致します <html> <head></head> <body> <form> ■分類<br> <input type="checkbox" name="category[]">果物 (■すいか <input type="radio" name="suika" disabled checked>含む <input type="radio" name="suika" disabled>除く <input type="radio" name="suika" disabled>のみ)<br> <input type="checkbox" name="category[]">肉<br> <input type="checkbox" name="category[]">魚<br> <input type="checkbox" name="category[]">穀物<br> <input type="checkbox" name="category[]">飲料<br> <br>■色<br> <input type="checkbox" name="color[]" disabled>赤<br> <input type="checkbox" name="color[]" disabled>黄<br> <input type="checkbox" name="color[]" disabled>青<br> <input type="checkbox" name="color[]" disabled>白<br> </form> </body> </html>

  • ボタンで選択されていないセレクトメニューの非反映2

    前回、「ボタンで選択されていないセレクトメニューの非反映」という質問をさせて頂いたものです。 http://okwave.jp/qa/q7093835.html 文章構成などは下記のHTMLをしようしているのですが…。 「蓋付きのボックス」の<ラジオボックスをチェックしなければ選択できない>はクリアできたのですが、「蓋付きバスケット」の方で迷っています。 後はこれで合計金額がきちんと出ればいいのですが…、 もうすこしお力とお時間を頂けないでしょうか? <html> <head> <title>簡単見積もり表</title> <script Language="JavaScript"> <!-- function calc() { n = 0; fObj = document.myFORM; n += eval(fObj.sel0.options[fObj.sel0.selectedIndex].value); n += eval(fObj.sel1.options[fObj.sel1.selectedIndex].value); for (i=0; i<3; i++) if (fObj[i].checked) n += eval(fObj[i].value); for (i=3; i<19; i++) if (fObj[i].checked) n += eval(fObj[i].value); fObj.result.value = n; } function linker(evt){ var t = evt.target || evt.srcElement; if(t.nodeName != "INPUT" || t.type != "radio") return; var sel, i, s; sel = t.form.getElementsByTagName("select"); for(i=0; s=sel[i++];) if(/(^| )linkage( |$)/.test(s.className)){ t = s.previousSibling; while(t && (t.nodeName != "INPUT" || t.type != "radio")) t = t.previousSibling; if(t) s.disabled = !t.checked; } } // --></script> </head> <body> <form name="myFORM" action="#" onclick="linker(event)"> <BR> <b>セットの果物を一つお選び下さい</b><br> <input type="radio" name="ch1" value="100">りんご(100円) <input type="radio" name="ch1" value="20">バナナ(20円) <input type="radio" name="ch1" value="200">梨(200円) <input type="radio" name="ch1" value="250">ブドウ(250円) <input type="radio" name="ch1" value="150" checked>みかん(150円)<br> <BR> <b>リボンの色をお選びください</b><br> <input type="radio" name="ch2" value="0" checked>赤(0円) <input type="radio" name="ch2" value="2000">青(0円) <input type="radio" name="ch2" value="0">金(10円)<br> <hr> <b>バスケットの形をお選び下さい</b><br> <INPUT type="radio" name="cover" value="1200" checked>プラスチック丸型編み込み\1200<INPUT type="checkbox" name="bx1" value="500">素材を木に変更(+\500)<BR> <INPUT type="radio" name="cover" value="1500">編み込み四角\1500<BR> <INPUT type="radio" name="cover" value="1500">編み込み楕円\1500<BR> <INPUT type="radio" name="cover" value="1000">蓋なしボックスレインボー1000円<br> <INPUT type="radio" name="cover" value="covered"><b>蓋付きのボックス</b> 色によって値段が変化します<br> <select class="linkage" name="color_of_cover" disabled> <OPTION value="0" selected>色を選択</OPTION> <OPTION value="39900">赤1000円</OPTION> <OPTION value="52500">青1000円</OPTION> <OPTION value="54600">金1100円</OPTION> </select><BR> <INPUT type="radio" name="cover" value="0"><b>蓋付きバスケット</b> 形によって値段が変化します<BR> <select name="sel1"> <OPTION value="0" selected>形を選択</OPTION> <OPTION value="1500">丸 1500円</OPTION> <OPTION value="1600">四角 1600円</OPTION> <OPTION value="1600">楕円 1600円</OPTION> </select> <br><hr><BR> <b>ご希望のオプションがあれば選択して下さい。(複数選択可)</b><BR> <INPUT type="checkbox" name="bx1" value="300">クッション材\300 <INPUT type="checkbox" name="bx1" value="200">飾り\200<BR> <INPUT type="checkbox" name="bx1" value="150">メッセージカード\150 <INPUT type="checkbox" name="bx1" value="2500">花束\2,500<BR> <BR> <hr> <input type="button" value="合計を出す" onClick="calc()"><br> 合計<input type="text" name="result"><br> </form> </body> </html>

  • 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階層にして、3段階目に繋げる2段階目の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(); }

  • form内に2つ以上のブロック要素があるとjavascriptが動作し

    form内に2つ以上のブロック要素があるとjavascriptが動作しません。 タイトルの通りですが、form内にラジオボタンとチェックボクスをdivで1つだけ囲むと ラジオボタンで選択した箇所の2つのチェックボックスが有効になるようにはしたんですが、 デザインの為にこれをラジオボタンとチェックボックスとそれぞれ<div>で囲むとjavascriptが動かなくなります。 javascriptの書き方を変えれば行けるような気がするのですがギブアップしました。 どなたかここを有効に出来るようなスクリプトを教えていただけないでしょうか。 初歩的な質問で申し訳なく思いますが、どうかよろしくお願いいたします。 <html> <head> <title>test</title> <SCRIPT TYPE="text/javascript"> <!-- function checkfunc(){ var f=document.getElementById("chkbtn"); for(var i=0;i<f.length;i++){ if(f[i].type=="checkbox"){ f[i].disabled=true; //チェックを元に戻す f[i].checked = true; } } for(var i=0;i<f.length;i++){ if(f[i].type=="radio" && f[i].checked){ var n=f[i].parentNode.firstChild; //ラジオボタンのvalue値でカテゴリを判断 var radio_now = f[i].value; while(n){ if(n.nodeName=="INPUT" && n.type=="checkbox") n.disabled=false; n=n.nextSibling; } } } } // --> </SCRIPT> <style type="text/css"> <!-- #wrap{ width: 170px; margin: 0 auto; } .radio_style{ color: #fff; width: 150px; background-color: #505050;; } .detail{ margin-left: 10px; } --> </style> </head> <body onload="checkfunc()"> <div id="wrap"> <form id="chkbtn" action="#"> <div class="radio_style"> <input type="radio" name="now" value="1" onclick="checkfunc()" onkeypress="checkfunc()" checked="selected" />宿泊<br /> </div> <div class="detail"> <input type="checkbox" id="h1box" checked="selected" />&nbsp;&nbsp;ホテル<br /> <input type="checkbox" id="h2box" checked="selected" />&nbsp;&nbsp;ビシネスホテル<br /> </div> <div class="radio_style"> <input type="radio" name="now" value="2" onclick="checkfunc()" onkeypress="checkfunc()">グルメ </div> <div class="detail"> <input type="checkbox" id="g1box" checked="selected" />&nbsp;&nbsp;うどん<br /> <input type="checkbox" id="g2box" checked="selected" />&nbsp;&nbsp;そば<br /> </div> </form> </div> </body> </html>

専門家に質問してみよう