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

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

ただいまの
回答率

87.78%

jquery セレクトボックス1で、選択した内容をセレクトボックス2で反映されない。

解決済

回答 2

投稿

  • 評価
  • クリップ 1
  • VIEW 2,039

score 49

セレクトボックス1(parent)の値を変えたときに、その行の内容で、セレクトボックス2(children)の内容を変更するため、カスタムデータ属性をremoveAttrを使って消しているのですが、うまく反映されないです。

      index.blade.php
      <select class="parent" name="foo">
        <option value="" selected="selected">地方を選択</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>
       </select>

```jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var $children = $('.children'); //都道府県の要素を変数に入れます。
var original = $children.html(); //後のイベントで、不要なoption要素を削除するため、オリジナルをとっておく

//地方側のselect要素が変更になるとイベントが発生
$('.parent').change(function() {
console.log("/都道府県のselect要素が変更されたね");
//選択された地方のvalueを取得し変数に入れる
var val1 = $(this).val();
//削除された要素をもとに戻すため.html(original)を入れておく
$children.html(original).find('option').each(function() {
var val2 = $(this).data('val'); //data-valの値を取得

//valueと異なるdata-valを持つ要素を削除
if (val1 != val2) {
$(this).not(':first-child').remove();
}

});

//地方側のselect要素が未選択の場合、都道府県をdisabledにする
if ($(this).val() == "") {
$children.attr('disabled', 'disabled');
} else {
const aaaa= $children.removeAttr('disabled');
console.log("/市内のselect要素が変更されたね", aaaa[0]);
}

});
})
</script>

Console.log の内容には、以下の文言が出力されています。

内のselect要素が変更されたね 
<select class=​"children" name=​"bar" tabindex=​"-98">
​<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>​
</select>​

セレクトボックス2(children)disabledの disabledも外れていないです。
すみませんがお力を貸してください。。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

+1

IEとか無視していいならこんな感じで

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2020/01/24 11:18

    お手数、お時間をいただき、誠にありがとうございます。
    ただ、どうしても、セレクト2側(children)側のdisableが外れず、選択できない状態でした。jQuery は最新バージョンに変更しましたが変わらなかったです。→1.12.4/jquery.min.js

    キャンセル

  • 2020/01/24 11:21

    codepenにアクセスして確認していただきました?
    動作環境のos,ブラウザの種類とバージョンは?

    キャンセル

  • 2020/01/24 11:34

    ありがとうございます。codepenosで動作を確認させていただきました。。こちらの環境か、何かが悪いかとおもいます。os はWindows 10, ブラウザは、Chrome ,79.0.3945.130です。Laravel Framework 5.8.29で作業をしています。

    キャンセル

check解決した方法

0

​"children" 側にデータを追加しても、botstrap の<li>タグには反映されなかったです。
そのため、.selectpicker('refresh')を行ったところ無事に反映されました。

yambejp 様、貴重なお時間を割いていただき、ありがとうございました。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

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