質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

261閲覧

リストボックスを連動し、2つ目のリストボックスにリンクを貼り付けしたい。

java_5656

総合スコア1

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2022/12/07 07:45

前提

HTMLとJavascriptでホームページを作成しています。
初心者のため、Jqueryは使用していません。

実現したいこと

リストAで表を選択するとリストBでは表の一覧、
リストAでグラフを選択するとリストBではグラフの一覧がリストに出力され、
リストBの結果をボタンクリックすると表やグラフへのリンク先へジャンプするようにしたいものです。

発生している問題・エラーメッセージ

リストボックスの連動は問題ありませんが、リンク先へ移動しません。

エラーメッセージ

該当のソースコード

<select id="style"> <option value="">選択してください <option value="sheet">表 <option value="graph">グラフ  <option value="engraph">円グラフ </select> <select id="type"> <option value="">選択してください</option> </select> <input type="button" value="クリックでファイルが開きます" onClick="link_open()"> <script> var array = new Array(); array[''] = new Array({cd:"0", label:"選択してください"}); array["sheet"] = new Array( {cd:"1", label:"表1",<li><a href="https://www.yahoo.co.jp"></Li>}, {cd:"2", label:"表2"}, {cd:"3", label:"表3"}, {cd:"4", label:"表4"}, {cd:"5", label:"表5"} ); array["graph"] = [ {cd:"1", label:"グラフ1"}, {cd:"2", label:"グラフ2"}, {cd:"3", label:"グラフ2-1"}, {cd:"4", label:"グラフ2-2"}, {cd:"5", label:"グラフ3"}, {cd:"5", label:"グラフ4"} ]; array["engraph"] = [ {cd:"1", label:"円グラフ1"}, {cd:"2", label:"円グラフ2"}, {cd:"3", label:"円グラフ3"}, {cd:"4", label:"円グラフ4"}, {cd:"5", label:"円グラフ5"} ]; document.getElementById('style').onchange = function(){ type = document.getElementById("type"); type.options.length = 0 var changedPref = style.value; for (let i = 0; i < array[changedPref].length; i++) { var op = document.createElement("option"); value = array[changedPref][i] op.value = value.cd; op.text = value.label; type.appendChild(op); } } <!-- function link_open(){ linkurl=document.lin.navi.value; window.open(linkurl,"_blank","toolbar=1, location=1, directories=1, status=1, menubar=1, scrollbars=1, resizable=1");} // --> </script>

試したこと

リストボックスの連動と、リストボックスへのリンクは
それぞれ作成するとうまく動作するのですが、
リストボックスを連動させて、そのリストボックスからリンク先への移動がうまくいきません。
リストボックスを1つだけにして、<option value="リンク先">はリンク先へ行きますが、
リストボックスを連動させるために、scriptでリストをoption value からCD””に置き換えてリンクを貼っても動作しません。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

int32_t

2022/12/07 22:03 編集

「表1」を選んでボタンを押したら https://www.yahoo.co.jp に飛ばしたい、ということでしょうか。そもそも「 {cd:"1", label:"表1",<li><a href="https://www.yahoo.co.jp"></Li>},」のリンクのデータが使われていないように見えますが。 document.lin.navi に相当する要素がソース中にありません。 誰でも問題が再現できるように配慮してもらえると回答しやすいです。
java_5656

2022/12/07 23:50

回答ありがとうございます。 お見込みのとおり、「表1」を選んでボタンを押すと例としてwww.yahoo.co.jpへリンクするようにしたいかったものです。 「表1」を押すとwww.yahoo.co.jpへリンクするようにするためのコード記載方法が {cd:"1", label:"表1",<li><a href="https://www.yahoo.co.jp"></Li>}, を {cd:"https://www.yahoo.co.jp, label:"表1",等へ修正してみたのですがうまくいきませんでした。 回答が見当違いであれば申し訳ありません。
guest

回答1

0

ベストアンサー

データは {cd:"https://www.yahoo.co.jp/", label:"表1"}, のように <option>value が URL になるようにして、関数 link_open() ではリストBの値を参照するのでいいんじゃないでしょうか。

js

1function link_open() { 2 const linkurl = document.querySelector('#type').value;

投稿2022/12/07 23:58

int32_t

総合スコア20659

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

java_5656

2022/12/08 00:12

御指摘いただいた個所のコードを修正したところ一発でうまく動作しました! ありがとうございます。このコードを修正するのに一カ月かかっていたので、大変助かりました。 ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問