1つ目のセレクトボックスで選んだ値に合わせて、2つ目のセレクトボックスに表示される選択肢が変わるセレクトボックスを下記の記事を参考に作りました。
https://try-m.co.jp/blog/web-create/936/

それを同じページに２つ設置したいので、1つ目のセレクトボックスを選択したときに、
選択をしたセレクトボックスの下にある２つ目のセレクトボックスのみと連動するように変更したいのですが、
セレクトボックス１の２つ目とセレクトボックス２の２つ目のoptionのテキストの値をそれぞれ取得して、どう
出し分けたらいいのか分からず困っています。

html
1<!-- 連動セレクトボックス１ -->
2<div class="selectDiv">
3  <select class="parent" name="type">
4    <option value="">洋服のタイプを選択</option>
5    <option value="タイプA">タイプA</option>
6    <option value="タイプB">タイプB</option>  
7  </select>
8</div>
9<div class="selectDiv">
10  <select class="childen" name="size">
11    <option value="">サイズを選択</option>
12    <option value="M" data-val="タイプA">M</option>
13    <option value="L" data-val="タイプA">L</option>
14    <option value="子供用M" data-val="タイプB">子供用M</option>
15    <option value="子供用L" data-val="タイプB">子供用L</option>
16  </select>
17</div>
18
19<!-- 連動セレクトボックス2 -->
20<div class="selectDiv">
21  <select class="parent" name="design">
22    <option value="">バッグのデザインを選択</option>
23    <option value="デザインA">デザインA</option>
24    <option value="デザインB">デザインB</option>  
25  </select>
26</div>
27<div class="selectDiv">
28  <select class="childen" name="color">
29    <option value="">色を選択</option>
30    <option value="赤" data-val="デザインA">赤</option>
31    <option value="青" data-val="デザインA">青</option>
32    <option value="緑" data-val="デザインB">緑</option>
33    <option value="黄" data-val="デザインB">黄</option>
34  </select>
35</div>

jQuery
1var children = $('.childen');
2var original = children.html();
3
4$('.parent').change(function() {
5  var thisChildren = $(this).parent().next().children(children);
6  var val1 = $(this).val();
7  
8  thisChildren.html(original).find('option').each(function() {
9    var val2 = $(this).data('val');
10
11    if (val1 != val2) {
12      $(this).not(':first-child').remove();
13    }
14  });
15
16  if ($(this).val() == "") {
17    $thisChildren.attr('disabled', 'disabled');
18  } else {
19    $thisChildren.removeAttr('disabled');
20  }
21});

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

回答2件

HTMLを書き換えるのもいいのですが、数が増えると煩雑になるため、disabledの変更がいいかと思います。
IEでは非表示にできませんが、選択できなくなります。

CSS
1select.childen option:disabled {
2  display: none;
3}

jQuery
1$('.parent').change(function() {
2  var $thisChildren = $(this).parent().next().children('.childen');
3  var val1 = $(this).val();
4
5  if (val1 === "") {
6    $thisChildren.prop('disabled', true);
7  } else {
8    $thisChildren.prop('disabled', false);
9    $thisChildren.find('option').each(function() {
10      $(this).prop('disabled', $(this).data('val') !== val1);
11    });
12    $thisChildren.find('option:first').prop('selected', true);
13  }
14});

投稿2018/10/12 05:04

x_x

総合スコア13749

yambejp

2018/10/12 05:50

すっかり忘れてましたがIEのoptionって非表示されないんでしたね・・・気づかせてもらってありがとうございます

melRel

2018/10/12 13:53

ありがとうございました。

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

ベストアンサー

javascript
1$(function(){
2  $('.selectDiv .parent').on('change',function(){
3    $(this).closest('.selectDiv').next('.selectDiv').find('.child option:not(:first)').hide().filter('[data-val="'+$(this).val()+'"]').show().end().end().find('.child option:first').prop('selected',true);
4    // 調整
5    // $(this).closest('.selectDiv').next('.selectDiv').find('.child option:not(:first)').hide().filter('[data-val="'+$(this).val()+'"]').show();
6  }).trigger('change');
7});

HTML
1<div class="selectDiv">
2  <select class="parent" name="type">
3    <option value="">洋服のタイプを選択</option>
4    <option value="タイプA">タイプA</option>
5    <option value="タイプB">タイプB</option>  
6  </select>
7</div>
8<div class="selectDiv">
9  <select class="child" name="size">
10    <option value="">サイズを選択</option>
11    <option value="M" data-val="タイプA">M</option>
12    <option value="L" data-val="タイプA">L</option>
13    <option value="子供用M" data-val="タイプB">子供用M</option>
14    <option value="子供用L" data-val="タイプB">子供用L</option>
15  </select>
16</div>
17<div class="selectDiv">
18  <select class="parent" name="design">
19    <option value="">バッグのデザインを選択</option>
20    <option value="デザインA">デザインA</option>
21    <option value="デザインB">デザインB</option>  
22  </select>
23</div>
24<div class="selectDiv">
25  <select class="child" name="color">
26    <option value="">色を選択</option>
27    <option value="赤" data-val="デザインA">赤</option>
28    <option value="青" data-val="デザインA">青</option>
29    <option value="緑" data-val="デザインB">緑</option>
30    <option value="黄" data-val="デザインB">黄</option>
31  </select>
32</div>

IE対応

javascript
1$(function(){
2  $('.child').each(function(){
3    $(this).clone().prop('disabled',true).removeClass('child').addClass('child2').hide().appendTo($(this).parent());
4    $(this).find('option:not(:first)').remove();
5  });
6  $('.parent').on('change',function(){
7    $(this).closest('.selectDiv').next('.selectDiv')
8    .find('.child option:not(:first)').remove().end()
9    .find('.child2 option[data-val="'+$(this).val()+'"]').clone().appendTo($(this).closest('.selectDiv').next('.selectDiv').find('.child'));
10  }).trigger('change');
11});