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

Question

###前提・実現したいこと
親セレクトボックスの中身を入れ替えることで、子セレクトボックスの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
              }
            ]
        }
      }
  ]
}

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

Answer 1

これでどうでしょう。

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

Comments

[hibikikudo]

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

[kei344]

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

[hibikikudo]

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