- ベストアンサー
JavaScriptを使ったセレクトボックスの表示先
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
document.writeは微妙ですね・・・ DOMっぽくいきませんか？ <script> function jumpURL(target){ if(target != ""){ document.getElementsByTagName("iframe")[0].src = target; } }; try{ window.addEventListener("load",function(){createForm();},false); }catch(e){ window.attachEvent("onload",function(){createForm()}); }; function createForm(){ var f=document.createElement("form"); var s=document.createElement("select"); s.setAttribute("name","select"); try{ s.addEventListener("change",function(){jumpURL(this.value)},false); }catch(e){ s.attachEvent("onchange",function(){jumpURL(s.value)}); }; var options=[ {"value":"","text":"セレクトボックス"} ,{"value":"http://www.yahoo.co.jp","text":"リンク1"} ,{"value":"http://www.google.co.jp","text":"リンク2"} ,{"value":"http://www.goo.ne.jp","text":"リンク3"} ]; for(var i in options){ var o=document.createElement("option"); o.setAttribute("value",options[i].value); o.appendChild(document.createTextNode(options[i].text)); s.appendChild(o); }; f.appendChild(s); document.getElementById("hoge").appendChild(f); } </script> <div id="hoge"></div> <iframe></iframe>
その他の回答 (4)
- yyr446
- ベストアンサー率65% (870/1330)
＜＜はずして確認しましたが同じく駄目でした。＞＞ Home Pageビルダーの問題かも知れませんね。（よく知りませんが） 手打ちでNo3さんのサンプルのとおり作成したらIBMのURLでも ちゃんと動作しますよ。
お礼
ご丁寧に有り難う御座いました。 色々と試してみます。
- yyr446
- ベストアンサー率65% (870/1330)
部外者ですが 「検索中のページは現在、利用できません。．．．．」 がでるのは、もしかしてソース内の特にURLの所に ＆＃8203；とか＆...とか入ってませんか？ ここ教えてのぺーじでは、回等欄とか投稿欄の中身をコピペする時、 勝手にごみがつく事がよくあります。 それから、document.writeが微妙なのは、htmlのwriteとブラウザーが解釈するタイミングの問題があるからだと思います。
お礼
＆＃8203；とか＆...とか入ってました。はずして確認しましたが同じく駄目でした。 document.writeが微妙なのは、⇒はなんとなくニュアンスが分かります。有り難う御座いました。
- yambejp
- ベストアンサー率51% (3827/7415)
であればこう？ function jumpURL(target){ if(target != ""){ document.getElementsByTagName("iframe")[0].src = target; } }
補足
<!-- function jumpURL(target){ if(target != ""){ document.getElementsByTagName("iframe")[0].src = target; } } document.write('<FORM>') document.write('<SELECT NAME="select" onChange="jumpURL(this.options[this.selectedIndex].value)">') document.write('<OPTION VALUE="">セレクトボックス'); document.write('<OPTION VALUE="http://www-6.ibm.com/jp/software/internet/hpb/">リンク1'); document.write('<OPTION VALUE="http://www-6.ibm.com/jp/software/internet/hpb/">リンク2'); document.write('<OPTION VALUE="http://www-6.ibm.com/jp/software/internet/hpb/">リンク3'); document.write('</SELECT></FORM>') //--> 上記のように挿入しました。 お陰様でインラインフレームに表示されましたが、下記のスクリプトエラーメッセージが出ます ライン:3 文字:142 エラー:'}'がありません。 コード:0 URL:http://www-06.ibm.com/software/jp/internet/hpb/ 気にする必要はないのでしょうか！ お忙しいところ申し訳ありませんが、宜しく御願いします。
- yambejp
- ベストアンサー率51% (3827/7415)
たとえばこんな感じ <select onchange="if(this.value!=''){document.getElementById('hoge').src=this.value}"> <option value="">選択する</option> <option value="http://www.yahoo.co.jp">yahoo</option> <option value="http://www.google.co.jp">google</option> </select> <iframe id="hoge"> </iframe>
補足
回答有り難う御座います。情報不足ですみませんでした。 Home Pageビルダー11です。下記のセレクトボックスとインラインフレームを取り込んでいます。 <body> <script language="JavaScript"> <!-- function jumpURL(target){ if(target != ""){ location.href = target } } document.write('<FORM>') document.write('<SELECT NAME="select" onChange="jumpURL(this.options[this.selectedIndex].value)">') document.write('<OPTION VALUE="">セレクトボックス'); document.write('<OPTION VALUE="http://www-6.ibm.com/jp/software/internet/hpb/">リンク1'); document.write('<OPTION VALUE="http://www-6.ibm.com/jp/software/internet/hpb/">リンク2'); document.write('<OPTION VALUE="http://www-6.ibm.com/jp/software/internet/hpb/">リンク3'); document.write('</SELECT></FORM>') //--> </script> <iframe frameborder="1" width="200" height="300" scrolling="AUTO" name="1"></iframe> </body> お手数をお掛けしますが宜しければ上記に基づき教えていただければ幸いです。
関連するQ&A
- javascriptでのセレクトボックスについて。
javascriptを使ったセレクトボックスについて教えてください。 教えてgooのカテゴリ選択のように、セレクトボックスでjavascripを使い、 一つめのselectボックスでは ・１ ・２ ・３ のオプションを選択可能に 二つめのselectボックスでは、 １が選択されたら ・１の１ ・１の２ ・１の３ のオプションを選択可能に ２が選択されたら ・２の１ ・２の２ ・２の３ を選択可能に ３が選択されたら ・３の１ ・３の２ ・３の３ を選択可能に と言う風にはどうすれば出来るでしょうか？ 教えてください、お願いします。
- 締切済み
- JavaScript
- セレクトボックス ＨＴＭＬ javascript
セレクトボックス ＨＴＭＬ javascript php セレクトボックスの複数選択についてですがご教授よろしくお願いいたします。たとえばセレクトボックスを二つ作り 一つ目のセレクトボックスを ・フルーツ ・寿司 ・カレー フルーツを選択すると二つ目のセレクトボックスの中が ・りんご ・みかん ・なし 寿司を選択すると二つ目のセレクトボックスが ・いくら ・まぐろ ・うに このように 一つ目のセレクトボックスの選択によって 二つ目のセレクトボックスの中身を変えるにはどのようなコードを組めば よろしいのでしょうか。 現在 php javascript mysqlの勉強しています。 ご教授いただければ幸いです。
- ベストアンサー
- HTML
- セレクトボックスを非表示にしたい。
セレクトボックスを非表示にしたい。 <TR> </TR> の中にあるセレクトボックスを単に非表示にしたいと思っています。 どう書けばできるかわかりません。 CSSでもjabascriptでもできるだけ単純な書き方を見つけようと だいぶググりましたが、わかりませんでした。 簡単にできる方法は無いでしょうか？ どなたかご教授お願いいたします。
- ベストアンサー
- HTML
- javascriptでセレクトボックスを動的に
javascriptでセレクトボックスの"selected"を動的に変更する方法を教えてください＞＜ 下記のselectedを"１０"から"５０"に変更したいのですが、 某ASPサービスの環境下での作業のため制約があり直接変更できません。 <body onload="event"> <select name="select"> <option value="10" selected="selected">10件</option> <option value="30">30件</option> <option value="50">50件</option> </select> そこで、JavaScriptで何とかしようと思うのですが、 <select>～ </select>の間（selectタグ含む）は、ASPサービスの制約でIDやclassを入れることもできず、 変更できるのは、body開始タグ部分、headerタグ内、body内（一部）です。 ページを読み込んだ際に、「５０件を選択」、「１０件からselected外す」状態にしたいです。 いろいろサイトを見てなんとなくできそうな気はするのですが、 スキル的に初心者レベルのため、わかりませんでした。 何卒よろしくお願いします！
- ベストアンサー
- JavaScript
- セレクトボックス自動表示
セレクトボックスの自動表示についてわからないことがあり、投稿させていただきました。 内容は 数字のセレクトボックスを複数つくり、その複数セレクトボックスの数字を全部足した合計の数を表示させ、さらに合計の数字の分だけ別でセレクトボックスを表示させるという内容です。 例 1つ目のセレクトボックス 012・・・89 2つ目のセレクトボックス 012・・・89 とあり、1つめのセレクトボックスを2とし、２つめのセレクトボックスも2とした場合、 合計は4になります。 その後また別のセレクトボックスを4つ表示させるといったことをしたいのですが、記述方法がわかりません。 お分かりの方がいらっしゃいましたら、ご教授お願いいたします。
- ベストアンサー
- JavaScript
- セレクトボックスで警告
Javascriptの初心者です。 セレクトボックスが二つ(a,b)あるとして、 セレクトボックスa中の項目いずれかを選択肢すると、 セレクトボックスbのどの項目をも選択できないようにするため、 警告をだしたいのですが、 よい方法をご教授していただけなでしょうか。 よろしくお願いいたします。
- 締切済み
- JavaScript
- JavaScriptを使って画像の拡大
JavaScriptを使って画像の拡大をしようとしています。 Fancyzoomを使って画像の拡大はできるようになったのですが、 IE6だと、セレクトボックスが拡大した画像の上に表示されてしまいます。 調べていくとIE6のセレクトボックスにはZindexが利かないことが分かりました。インラインフレームとdivを使えばセレクトボックスを画像の下に隠すことが可能だとはわかったのですが、 Fancyzoomの何処を変更すればいいのかわかりません。 すみませんが、ご教授を頂けないでしょうか？ 途方にくれています。どうか、よろしくお願いします。
- 締切済み
- JavaScript
- Javascriptを使ったセレクトボックスでPHPの変数を表示させるには？
下記のページに書かれている通り、 選択肢(1)によって、選択肢(2)の内容が変わるようにしたのですが、 http://www.ksknet.net/javascript/post_54.html 内容を、PHPでデータベースに保存して更新を行なう時に、 選択肢(2)のセレクトボックスで選んだ内容を 表示させる方法がわかりません。 ■やりたいこと 上記ページのスクリプトで、 選択肢(1)を「果物」、選択肢(2)を「みかん」にして、 MySQLに保存して、更新を行なった際、 下記のように更新が行なえるようにしたい。 【選択肢(1)で選んだモノが最上位に表示される】 （例：$select1=「果物」で保存した場合、「果物」が最上位） <select name = "selectName1" onChange="functionName()"> <option value = "$select1">$select1</option> <option value = "果物">果物</option> <option value = "野菜">野菜</option> <option value = "野菜">野菜</option> </select> 【選択肢(2)で選んだモノが最上位に表示される】 （例：$select2=「みかん」で保存した場合、「みかん」が最上位） <select name = "selectName2"></select> ※このフォームに、$select2を入れて、$select2の内容を表示し、 他の選択肢(2)の内容も表示したいのですが、方法がわかりません。 少しわかりにくい質問かも知れませんが、 どうしても実現したいことなので、是非とも宜しくお願いします。
- ベストアンサー
- JavaScript
- セレクトボックスを切り替えるとテキストボックスの中身が消える
セレクトボックスを切り替えるとテキストボックスの中身が消えるというのはJavaScriptでできますか？書き方が分かりません。教えてください。例えばセレクトボックスの中身を"新規作成"にしたとき。消えてくれればうれしいです。
- ベストアンサー
- JavaScript
- セレクトボックスのスタイルについて
http://www.lockon.co.jp/blog/javascript/post_7.html 上記のようなセレクトボックスの中身が変わるセレクトボックスで、 常に右のセレクトボックスの上から３番目までの背景色を固定にしたいのですが、どのようにすればいいかわからずにおります。 どなたかご教授ください。
- ベストアンサー
- JavaScript
お礼
長らくの間色々とご教授有り難う御座いました。 部外者ですが 「検索中のページは現在、利用できません。．．．．」 がでるのは、もしかしてソース内の特にURLの所に ＆＃8203；とか＆...とか入ってませんか？ ここ教えてのぺーじでは、回等欄とか投稿欄の中身をコピペする時、 勝手にごみがつく事がよくあります。 と言うご忠告を頂き、すべてを手挿入で見直しましたところ、問題点がすべて解決いたしました。 yambejpさま、yyr446さま 良い勉強をさせて頂き有り難う御座いました。
補足
<body> <script> function jumpURL(target){ if(target != ""){ document.getElementsByTagName("iframe")[0].src = target; } }; try{ window.addEventListener("load",function(){createForm();},false); }catch(e){ window.attachEvent("onload",function(){createForm()}); }; function createForm(){ var f=document.createElement("form"); var s=document.createElement("select"); s.setAttribute("name","select"); try{ s.addEventListener("change",function(){jumpURL(this.value)},false); }catch(e){ s.attachEvent("onchange",function(){jumpURL(s.value)}); }; var options=[ {"value":"","text":"セレクトボックス"} ,{"value":"http://www.yahoo.co.jp","text":"リンク1"} ,{"value":"http://www.google.co.jp","text":"リンク2"} ,{"value":"http://www.goo.ne.jp","text":"リンク3"} ]; for(var i in options){ var o=document.createElement("option"); o.setAttribute("value",options[i].value); o.appendChild(document.createTextNode(options[i].text)); s.appendChild(o); }; f.appendChild(s); document.getElementById("hoge").appendChild(f); } </script> <div id="hoge"></div> <iframe></iframe> </body> </html> ページを表示できません。 検索中のページは現在、利用できません。Web サイトに技術的な問題が発生しているか、ブラウザの設定を調整する必要があります。 とエラーが出ます。 プログラミング知識は全く持ち合わせていませんので、笑わないでご指導下さい。 <div id="hoge"></div> <iframe></iframe>はこのまま埋め込んで良いのですか。 DOMっぽくいきませんか？⇒意味が分からなくて http://www.doraneko.org/misc/dom10/19981001/introduction.html 勉強しました。 ご教授いただいた function jumpURL(target){ if(target != ""){ document.getElementsByTagName("iframe")[0].src = target; } } で他のURLに変更して10件位試しましたら、エラーメッセージが出ません。 IBMのURLのみの問題ではないでしょうか？ この状態であれば使えそうなのですが。 すみませんが、エラーの分析を教えていただけませんか？ 色々と有り難う御座います。本当に助かります。今後とも宜しく御願いします。ご迷惑でしょうが。