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

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

ただいまの
回答率

88.63%

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

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 862

ebichiri

score 13

 前提・実現したいこと

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

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

 該当のソースコード

<select id="otukai">
  <option value="yaoya">八百屋</option>
  <option value="sakana">魚屋</option>
</select>

<select id="kaumono">
  <option value="">先におつかい先を選んでください</option>
</select>
var yaoya = ['りんご','みかん','レタス'];
var sakana = ['サンマ','鯛','かつお'];

var otukai = document.getElementById('otukai');
var kaumono = document.getElementById('kaumono');

otukai.addEventListener('change', function(){
  var otukai_val = otukai.value;
  if (otukai_val !== ''){
    for (i = 0; i < otukai_val.length; i++) {
      var ot = document.createElement('option');
      ot.textContent = (otukai_val[i]);
      ot.value = (otukai_val[i]);
      kaumono.appendChild(ot);
    }
  }
}

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

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

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

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

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

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

+1

window[otukai.value]


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

var items = {
  yaoya: ['りんご','みかん','レタス'],
  sakana: ['サンマ','鯛','かつお']
};
otukai.addEventListener('change', function(){
  var otukai_val = items[otukai.value];
  if (otukai_val) {
    var options = kaumono.querySelectorAll('option:not([value=""])');
    for (var i = options.length; i--;) {
      options[i].parentNode.removeChild(options[i]);
    }

    // 以下略。

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

<datalist id="yaoya">
 <option value="">選んでください</option>
 <option>りんご</option>
 <option>みかん</option>
 <option>レタス</option>
</datalist>
<datalist id="sakana">
 <option value="">選んでください</option>
 <option>サンマ</option>
 <option></option>
 <option>かつお</option>
</datalist>
otukai.addEventListener('change', function(){
  var otukai_val = document.getElementById(otukai.value);
  if (otukai_val) {
    // kaumono.innerHTML = otukai_val.innerHTML; // 手抜き。
    kaumono.innerHTML = '';
    for (var i = 0; i < otukai_val.children.length; i++) {
      kaumono.add(otukai_val.children[i].cloneNode(true));
    }
  }
});

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/11/13 15:06

    ご回答ありがとうございます。
    いただいた"var items"の方法をそのまま試しまして、無事に動かす事ができました!

    datalistにつきましては初めて目にするもので、
    現在どうやって動かしたらよいのか調べながら書いてみているところになります。

    様々な方法をご提示いただきましてありがとうございます。大変勉強になります。

    キャンセル

+1

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

var yaoya = ['りんご','みかん','レタス'];
var sakana = ['サンマ','鯛','かつお'];

var otukai = document.getElementById('otukai');
var kaumono = document.getElementById('kaumono');

otukai.addEventListener('change', function(){
  $('#kaumono').children().remove();
  var otukai_val = otukai.value;
  var array;
  var ot;
  if (otukai_val == 'yaoya'){
    array = yaoya;
  }else{
    array = sakana;
  }

  for(var i=0;i<array.length;i++) {
    ot = document.createElement('option');
    ot.textContent = (array[i]);
    ot.value = (array[i]);
    kaumono.appendChild(ot);
  }
});

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/11/13 14:52

    ご回答ありがとうございます。説明が足りなく申し訳ないです。
    今回javascriptのみで書こうとしておりました為に、
    いただいた方法はまたjQueryを使用する際に試してみたいと思います。

    エラーの状態についての解説もありがとうございます。
    値と変数は同じ名前でも違うのだという事が分かりました!

    キャンセル

+1

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

https://jsfiddle.net/Ljt1esan/

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/11/12 17:50

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

    キャンセル

  • 2018/11/12 17:57 編集

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

    キャンセル

  • 2018/11/13 15:25

    ご回答ありがとうございます。
    いただいたリンク先と、ローカルでも動きを確認する事ができました!
    削除をするのにも色々な書き方がある事が分かり、とても勉強になります。

    また、丁寧なコメントも付けてくださりありがとうございます。
    書き出される"kaumono"のリスト先頭に、選択を促す様な文言を入れたいと思います。

    キャンセル

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

  • ただいまの回答率 88.63%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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