こ2つのセレクトボックスをそれぞれ２つのhtmlファイルにわけてjQueryとjsのみを使ってAjax通信で動的に取得したい

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>地方選択</title> <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script> <script> $(() => { let $children = $(".children"); //都道府県の要素を変数に入れます。 let original = $children.html(); //後のイベントで、不要なoption要素を削除するため、オリジナルを取っておく //地方側のselect要素が変更になるとイベントが発生 $(".parent").change(function () { let val1 = $(this).val(); //選択された地方のvalueを取得し変数に入れる //削除された要素をもとに戻すため、html(original)を入れておく $children .html(original) .find("option") .each(function () { let val2 = $(this).data("val"); //data-valの値を取得

          //valueと異なるdata-valを持つ要素を削除
          //:first=child親要素マイに最初の子要素を選択する
          if (val1 != val2) {
            $(this).not(":first-child").remove();
          }
        });
      //地方側のselect要素が未選択の場合、都道府県をdisabledにする
      //disabled無効
      if ($(this).val() == "") {
        //attrメソッドHTMLの要素の様々な属性の値を取得や変更ができるメソッド
        $childeren.attr("disabled", "disabled");
      } else {
        //removeAtterメソッド属性を削除する
        $children.removeAttr("disabled");
      }
    });
  });
</script>

</head> <body> <select class="parent" name="foo"> <option value="" selected="selected">地方を選択</option> <option value="北海道・東北">北海道・東北</option> <option value="関東">関東</option> <option value="甲信越・北陸">甲信越・北陸</option> <option value="東海">東海</option> <option value="関西">関西</option> <option value="中国">中国</option> <option value="四国">四国</option> <option value="九州・沖縄">九州・沖縄</option> </select>

<select class="children" name="bar" disabled>
  <option value="" selected="selected">都道府県を選択</option>
  <option value="北海道" data-val="北海道・東北">北海道</option>
  <option value="青森県" data-val="北海道・東北">青森県</option>
  <option value="岩手県" data-val="北海道・東北">岩手県</option>
  <option value="宮城県" data-val="北海道・東北">宮城県</option>
  <option value="秋田県" data-val="北海道・東北">秋田県</option>
  <option value="山形県" data-val="北海道・東北">山形県</option>
  <option value="福島県" data-val="北海道・東北">福島県</option>
  <option value="茨城県" data-val="関東">茨城県</option>
  <option value="栃木県" data-val="関東">栃木県</option>
  <option value="群馬県" data-val="関東">群馬県</option>
  <option value="埼玉県" data-val="関東">埼玉県</option>
  <option value="千葉県" data-val="関東">千葉県</option>
  <option value="東京都" data-val="関東">東京都</option>
  <option value="神奈川県" data-val="関東">神奈川県</option>
  <option value="新潟県" data-val="甲信越・北陸">新潟県</option>
  <option value="富山県" data-val="甲信越・北陸">富山県</option>
  <option value="石川県" data-val="甲信越・北陸">石川県</option>
  <option value="福井県" data-val="甲信越・北陸">福井県</option>
  <option value="山梨県" data-val="甲信越・北陸">山梨県</option>
  <option value="長野県" data-val="甲信越・北陸">長野県</option>
  <option value="岐阜県" data-val="東海">岐阜県</option>
  <option value="静岡県" data-val="東海">静岡県</option>
  <option value="愛知県" data-val="東海">愛知県</option>
  <option value="三重県" data-val="東海">三重県</option>
  <option value="滋賀県" data-val="関西">滋賀県</option>
  <option value="京都府" data-val="関西">京都府</option>
  <option value="大阪府" data-val="関西">大阪府</option>
  <option value="兵庫県" data-val="関西">兵庫県</option>
  <option value="奈良県" data-val="関西">奈良県</option>
  <option value="和歌山県" data-val="関西">和歌山県</option>
  <option value="鳥取県" data-val="中国">鳥取県</option>
  <option value="島根県" data-val="中国">島根県</option>
  <option value="岡山県" data-val="中国">岡山県</option>
  <option value="広島県" data-val="中国">広島県</option>
  <option value="山口県" data-val="中国">山口県</option>
  <option value="徳島県" data-val="四国">徳島県</option>
  <option value="香川県" data-val="四国">香川県</option>
  <option value="愛媛県" data-val="四国">愛媛県</option>
  <option value="高知県" data-val="四国">高知県</option>
  <option value="福岡県" data-val="九州・沖縄">福岡県</option>
  <option value="佐賀県" data-val="九州・沖縄">佐賀県</option>
  <option value="長崎県" data-val="九州・沖縄">長崎県</option>
  <option value="熊本県" data-val="九州・沖縄">熊本県</option>
  <option value="大分県" data-val="九州・沖縄">大分県</option>
  <option value="宮崎県" data-val="九州・沖縄">宮崎県</option>
  <option value="鹿児島県" data-val="九州・沖縄">鹿児島県</option>
  <option value="沖縄県" data-val="九州・沖縄">沖縄県</option>
</select>

</body> </html>

ex025

2020/09/08 07:20

質問内容を本文に詳しく書いてください。

行動規範の内容に同意します

回答1件

自己解決

html
1コード

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>地方選択</title>
  <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
  <script>
    $(() => {
      //地方を選択したらajax通信を走らせる
      //eventには .regionの変更イベントが渡される
      $(".region").change(function (event) {
        //既に追加されている都道府県をリセット
        //.append(optionEl);で追加したら残ってしまうため
        $("#select-area47").html(`<option value="">--選択--</option>`);
        //targetでイベントが発生したDOM要素を取得
        //event.targetには.region の HTML オブジェクトが入っている
        // console.log(event);
        console.log("event.target", event.target);
        //event.target.valueには選択された地域が入っている
        console.log("event.target.value", event.target.value);
        //選択された地方を代入
        const selectedRegion = event.target.value;

        console.log("地域が選択されました", selectedRegion);

        $.ajax({
          // url: "http://localhost:3000/prefecture.html",
          url: "prefecture.html",
          //dataType: "html",
          //ajax通信が成功したら data に prefecture.html の中身が入っている
          success: function (data) {
            // console.log("成功",data);
            //取得した prefecture.htmlのoptionタグを全て検索して1つずつ見ていく
            $(data)
              .find("option")
              .each(function (index, optionEl) {
                //find()メソッド 子要素を取得　dataの中のoption
                //each()メソッド 繰り返す処理
                //indexは番号　optionElはoptionタグが入っている
                //<option value="青森県" data-val="北海道・東北">青森県</option>
                //optionEl.valueには "青森県"
                //$(optionEl).data("val")には"北海道・東北"が入っている
                //data("val")は独自のデータ属性data-valの値を取得するメソッド dataメソッド
                //javascriptではdatasetで取得する
                //都道府県名　表では使わないwarmで使う
                const prefectureName = optionEl.value;
                //地方名
                const regionName = $(optionEl).data("val");

                console.log(prefectureName);
                console.log(regionName);
                //選択した地方名と通信したoptionの地方名が同じならば
                if (selectedRegion === regionName) {
                  //警告レベルの黄色いログを出力
                  console.warn(prefectureName);
                  //optionElはoptionタグなのでappendで追加する
                  //指定した子要素の最後にテキスト文字やHTML要素を追加することができるメソッド
                  $("#select-area47").append(optionEl);
                }
              });
          },
          //ajax失敗したときの処理
          error:function(data){
            alert("error");
          },
        });
      });
    });
  </script>
</head>

<body>
  <select name="foo" class="region">
    <option value="" selected="selected">地方を選択</option>
    <option value="北海道・東北">北海道・東北</option>
    <option value="関東">関東</option>
    <option value="甲信越・北陸">甲信越・北陸</option>
    <option value="東海">東海</option>
    <option value="関西">関西</option>
    <option value="中国">中国</option>
    <option value="四国">四国</option>
    <option value="九州・沖縄">九州・沖縄</option>
  </select>
  <select name="area47" id="select-area47">
    <option value="">--選択--</option>
    <!--ここにajaxで生成したoptionタグがはいります-->
  </select>
</body>

</html>```html
コード

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>都道府県</title> </head> <body> <select class="chirdren" name="bar" disabled> <option value="" selected="selected">都道府県を選択</option>    <option value="北海道" data-val="北海道・東北" data-aaa="北海道・東北" data-b="北海道・東北"> 北海道 </option>

<option value="青森県" data-val="北海道・東北">青森県</option>
<option value="岩手県" data-val="北海道・東北">岩手県</option>
<option value="宮城県" data-val="北海道・東北">宮城県</option>
<option value="秋田県" data-val="北海道・東北">秋田県</option>
<option value="山形県" data-val="北海道・東北">山形県</option>
<option value="福島県" data-val="北海道・東北">福島県</option>
<option value="茨城県" data-val="関東">茨城県</option>
<option value="栃木県" data-val="関東">栃木県</option>
<option value="群馬県" data-val="関東">群馬県</option>
<option value="埼玉県" data-val="関東">埼玉県</option>
<option value="千葉県" data-val="関東">千葉県</option>
<option value="東京都" data-val="関東">東京都</option>
<option value="神奈川県" data-val="関東">神奈川県</option>
<option value="新潟県" data-val="甲信越・北陸">新潟県</option>
<option value="富山県" data-val="甲信越・北陸">富山県</option>
<option value="石川県" data-val="甲信越・北陸">石川県</option>
<option value="福井県" data-val="甲信越・北陸">福井県</option>
<option value="山梨県" data-val="甲信越・北陸">山梨県</option>
<option value="長野県" data-val="甲信越・北陸">長野県</option>
<option value="岐阜県" data-val="東海">岐阜県</option>
<option value="静岡県" data-val="東海">静岡県</option>
<option value="愛知県" data-val="東海">愛知県</option>
<option value="三重県" data-val="東海">三重県</option>
<option value="滋賀県" data-val="関西">滋賀県</option>
<option value="京都府" data-val="関西">京都府</option>
<option value="大阪府" data-val="関西">大阪府</option>
<option value="兵庫県" data-val="関西">兵庫県</option>
<option value="奈良県" data-val="関西">奈良県</option>
<option value="和歌山県" data-val="関西">和歌山県</option>
<option value="鳥取県" data-val="中国">鳥取県</option>
<option value="島根県" data-val="中国">島根県</option>
<option value="岡山県" data-val="中国">岡山県</option>
<option value="広島県" data-val="中国">広島県</option>
<option value="山口県" data-val="中国">山口県</option>
<option value="徳島県" data-val="四国">徳島県</option>
<option value="香川県" data-val="四国">香川県</option>
<option value="愛媛県" data-val="四国">愛媛県</option>
<option value="高知県" data-val="四国">高知県</option>
<option value="福岡県" data-val="九州・沖縄">福岡県</option>
<option value="佐賀県" data-val="九州・沖縄">佐賀県</option>
<option value="長崎県" data-val="九州・沖縄">長崎県</option>
<option value="熊本県" data-val="九州・沖縄">熊本県</option>
<option value="大分県" data-val="九州・沖縄">大分県</option>
<option value="宮崎県" data-val="九州・沖縄">宮崎県</option>
<option value="鹿児島県" data-val="九州・沖縄">鹿児島県</option>
<option value="沖縄県" data-val="九州・沖縄">沖縄県</option>

</select> </body> </html>

投稿2020/09/13 02:23

nuya

総合スコア7