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

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

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

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

JavaScript

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

Q&A

解決済

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

java_5656
java_5656

総合スコア1

HTML5

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

JavaScript

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

1回答

0グッド

0クリップ

131閲覧

投稿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/ツールのバージョンなど)

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

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

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",等へ修正してみたのですがうまくいきませんでした。 回答が見当違いであれば申し訳ありません。

回答1

1

ベストアンサー

データは {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

総合スコア17258

java_5656😄を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

java_5656

2022/12/08 00:12

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

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

同じタグがついた質問を見る

HTML5

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

JavaScript

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