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

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

ただいまの
回答率

89.20%

.emptyイベントと.readyイベントを競合させずにセレクトボックスの中身を表示させる

解決済

回答 1

投稿 編集

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

hibikikudo

score 230

前提・実現したいこと

親セレクトボックスの中身を入れ替えることで、子セレクトボックスのoptionを入れ替えるjQueryコードを書いた。
.change.emptyイベントを使用しているため、最初に画面がロードされた時点では子セレクトボックスの中身が何も表示されない。最初に画面がロードされた時点でも子セレクトボックスの中身を表示させたい。

該当のソースコード

<select id="tagKey"></select><select id="tagValue"></select>
/*----------------------------------------------------
            JSONをセレクトボックスに格納
    ----------------------------------------------------*/
    var tagObj = new Object;
    $.getJSON("json/tag.json", function (selTagKey) {
        var _key = selTagKey.key;
        tagObj = selTagKey;
        for (var i in _key) {
            for (var n in _key[i]) {
                var test = _key[i][n];
                var options = $('<option></option>', {
                    text: test.label,
                    "value": test.data,
                    "selected": test.selected
                });
                $("#tagKey").append(options);
                for (var v in _key[i][n]['value']) {
                    var _val = _key[i][n]['value'][v];
                    var child_options = $('<option></option>', {
                        text: _val.label,
                        "value": _val.data,
                        "selected": _val.selected
                    });
                }
            }
        };
    });
    /*----------------------------------------------------
            セレクトボックス中身切り替え
    ----------------------------------------------------*/

    $("#tagKey").on("change", function () {
        $("#tagValue").empty();
        var _key = tagObj.key[0][$(this).val()]['value'];
        for (var v in _key) {
            var _val = _key[v];
            var child_options = $('<option></option>', {
                text: _val.label,
                "value": _val.data,
                "selected": _val.selected
            });
            $("#tagValue").append(child_options);
        }
    });
{
  "key": [{
      "hoge": {
        "label": "Tom",
        "data": "data-1",
        "selected": true,
        "value": [
          {
              "label": "Dick",
              "data": "data-2",
              "selected": true
              },
            {
              "label": "Harry",
              "data": "data-3",
              "selected": false
              },
            {
              "label": "None",
              "data": "None",
              "selected": false
              }
            ]
      },

      "huga": {
        "label": "Ann",
        "data": "data-a",
        "selected": false,
        "value": [
          {
              "label": "Liz",
              "data": "data-b",
              "selected": true
              },
            {
              "label": "Nancy",
              "data": "data-c",
              "selected": false
              },
            {
              "label": "None",
              "data": "None",
              "selected": false
              }
            ]
        }
      }
  ]
}


何卒よろしくお願いいたします。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+2

これでどうでしょう。

$("#tagKey").on("change", function () {
    /* 省略 */
}).change(); // ADD

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/10/26 19:12 編集

    回答ありがとうございます。上記の方法ではうまくいきませんでした。.emptyが優先されてしまうようです。

    キャンセル

  • 2016/10/26 19:16

    あ、JSONをajaxで取得されていましたね、見落としていました。
    $("#tagKey").change();をgetJSONのコールバック関数の最後に付けてみてください。

    キャンセル

  • 2016/10/26 19:30

    ありがとうございます。こちらの方法でうまくいきました!

    キャンセル

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

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