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

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

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

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

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

3回答

236閲覧

selectで選択した値を取得した後に、その値と同じ名前の配列を使用したい

ebichiri

総合スコア13

HTML5

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

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2018/11/12 08:02

前提・実現したいこと

javascriptによる、formの制御をしたいです。

selectで選択した値を取得した後に、その値と同じ名前の配列を見に行き、
別のselect内にその配列を一つずつoptionとして書き出したいです。

該当のソースコード

HTML

1<select id="otukai"> 2 <option value="yaoya">八百屋</option> 3 <option value="sakana">魚屋</option> 4</select> 5 6<select id="kaumono"> 7 <option value="">先におつかい先を選んでください</option> 8</select>

javascript

1var yaoya = ['りんご','みかん','レタス']; 2var sakana = ['サンマ','鯛','かつお']; 3 4var otukai = document.getElementById('otukai'); 5var kaumono = document.getElementById('kaumono'); 6 7otukai.addEventListener('change', function(){ 8 var otukai_val = otukai.value; 9 if (otukai_val !== ''){ 10 for (i = 0; i < otukai_val.length; i++) { 11 var ot = document.createElement('option'); 12 ot.textContent = (otukai_val[i]); 13 ot.value = (otukai_val[i]); 14 kaumono.appendChild(ot); 15 } 16 } 17}

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

------------------- ▼"otukai"の"yaoya"を選択した時に、"kaumono"に対してこう表示されてほしいのですが、 ------------------- <select id="kaumono"> <option value="りんご">りんご</option> <option value="みかん">みかん</option> <option value="レタス">レタス</option> </select> ------------------- ▼"yaoya"がそのまま文字として書き出されてしまいました ------------------- <select id="kaumono"> <option value="y">y</option> <option value="a">a</option> <option value="o">o</option> <option value="y">y</option> <option value="a">a</option> </select>

試したこと

検索をしてみたのですが、
なかなか同じような状況に使用できるサンプルコードが見つからない状態になります。
ご教授の程、何卒どうぞよろしくお願いいたします。

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

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

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

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

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

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

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

guest

回答3

0

やり方はいろいろありますが、元のソースを尊重すると、
下記のリンク先のようになります。
リストをクリアするのを忘れてはいけません。選択するたびに増えてしまいます。

https://jsfiddle.net/Ljt1esan/

投稿2018/11/12 08:45

runny_nose

総合スコア280

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

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

runny_nose

2018/11/12 08:50

すみません、投稿後に気づきましたがx_xさんとほぼ同内容でした。 (リストのクリア方法がほんのちょっと違うだけでほぼ一緒)
runny_nose

2018/11/12 08:58 編集

あと上記サンプルのようにプレースホルダか空白を表示するほうが良いかもしれません。 初期は先頭の八百屋が選択されているにもかかわらず「先におつかい先を選んでください」と出てしまうような形になるため。
ebichiri

2018/11/13 06:25

ご回答ありがとうございます。 いただいたリンク先と、ローカルでも動きを確認する事ができました! 削除をするのにも色々な書き方がある事が分かり、とても勉強になります。 また、丁寧なコメントも付けてくださりありがとうございます。 書き出される"kaumono"のリスト先頭に、選択を促す様な文言を入れたいと思います。
guest

0

ベストアンサー

JavaScript

1window[otukai.value]

としてもいいですがさすがに気持ち悪いのでデータは以下のように持っておきます。

JavaScript

1var items = { 2 yaoya: ['りんご','みかん','レタス'], 3 sakana: ['サンマ','鯛','かつお'] 4};

JavaScript

1otukai.addEventListener('change', function(){ 2 var otukai_val = items[otukai.value]; 3 if (otukai_val) { 4 var options = kaumono.querySelectorAll('option:not([value=""])'); 5 for (var i = options.length; i--;) { 6 options[i].parentNode.removeChild(options[i]); 7 } 8 9 // 以下略。

-- 18:13 別解追記。
この手のものは template 要素を使えば documentFragment が使えて楽になるのですが、あえて IE を考慮して datalist で作ってみます。

HTML

1<datalist id="yaoya"> 2 <option value="">選んでください</option> 3 <option>りんご</option> 4 <option>みかん</option> 5 <option>レタス</option> 6</datalist> 7<datalist id="sakana"> 8 <option value="">選んでください</option> 9 <option>サンマ</option> 10 <option>鯛</option> 11 <option>かつお</option> 12</datalist>

JavaScript

1otukai.addEventListener('change', function(){ 2 var otukai_val = document.getElementById(otukai.value); 3 if (otukai_val) { 4 // kaumono.innerHTML = otukai_val.innerHTML; // 手抜き。 5 kaumono.innerHTML = ''; 6 for (var i = 0; i < otukai_val.children.length; i++) { 7 kaumono.add(otukai_val.children[i].cloneNode(true)); 8 } 9 } 10});

投稿2018/11/12 08:29

編集2018/11/12 09:19
x_x

総合スコア13749

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

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

ebichiri

2018/11/13 06:06

ご回答ありがとうございます。 いただいた"var items"の方法をそのまま試しまして、無事に動かす事ができました! datalistにつきましては初めて目にするもので、 現在どうやって動かしたらよいのか調べながら書いてみているところになります。 様々な方法をご提示いただきましてありがとうございます。大変勉強になります。
guest

0

質問者さんのやりたいことを実現するには恐らくこんな感じでしょうか。

JavaScript

1var yaoya = ['りんご','みかん','レタス']; 2var sakana = ['サンマ','鯛','かつお']; 3 4var otukai = document.getElementById('otukai'); 5var kaumono = document.getElementById('kaumono'); 6 7otukai.addEventListener('change', function(){ 8 $('#kaumono').children().remove(); 9 var otukai_val = otukai.value; 10 var array; 11 var ot; 12 if (otukai_val == 'yaoya'){ 13 array = yaoya; 14 }else{ 15 array = sakana; 16 } 17 18 for(var i=0;i<array.length;i++) { 19 ot = document.createElement('option'); 20 ot.textContent = (array[i]); 21 ot.value = (array[i]); 22 kaumono.appendChild(ot); 23 } 24});

▼"yaoya"がそのまま文字として書き出されてしまいました

上記のようになってしまったのは、
var otukai_val = otukai.value;otsukaiに代入されているものは、
<select id="otukai">value(="yaoya")であり、var yaoyaではないから
ですね。

投稿2018/11/12 08:26

編集2018/11/12 08:30
madoka9393

総合スコア992

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

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

ebichiri

2018/11/13 05:52

ご回答ありがとうございます。説明が足りなく申し訳ないです。 今回javascriptのみで書こうとしておりました為に、 いただいた方法はまたjQueryを使用する際に試してみたいと思います。 エラーの状態についての解説もありがとうございます。 値と変数は同じ名前でも違うのだという事が分かりました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問