質問編集履歴

1 誤字

melRel

melRel score 12

2018/10/12 13:23  投稿

2つのセレクトボックスを連動させたものを同じページで複数使いたい
1つ目のセレクトボックスで選んだ値に合わせて、2つ目のセレクトボックスに表示される選択肢が変わるセレクトボックスを下記の記事を参考に作りました。
https://try-m.co.jp/blog/web-create/936/
それを同じページに2つ設置したいので、1つ目のセレクトボックスを選択したときに、
選択をしたセレクトボックスの下にある2つ目のセレクトボックスのみと連動するように変更したいのですが、
セレクトボックス1の2つ目とセレクトボックス2の2つ目のoptionのテキストの値をそれぞれ取得して、どう
出し分けたらいいのか分からず困っています。
```html
<!-- セレクトボックス1 -->
<!-- 連動セレクトボックス1 -->
<div class="selectDiv">
 <select class="parent" name="type">
   <option value="">洋服のタイプを選択</option>
   <option value="タイプA">タイプA</option>
   <option value="タイプB">タイプB</option> 
 </select>
</div>
<div class="selectDiv">
 <select class="childen" name="size">
   <option value="">サイズを選択</option>
   <option value="M" data-val="タイプA">M</option>
   <option value="L" data-val="タイプA">L</option>
   <option value="子供用M" data-val="タイプB">子供用M</option>
   <option value="子供用L" data-val="タイプB">子供用L</option>
 </select>
</div>
<!-- セレクトボックス2 -->
<!-- 連動セレクトボックス2 -->
<div class="selectDiv">
 <select class="parent" name="design">
   <option value="">バッグのデザインを選択</option>
   <option value="デザインA">デザインA</option>
   <option value="デザインB">デザインB</option> 
 </select>
</div>
<div class="selectDiv">
 <select class="childen" name="color">
   <option value="">色を選択</option>
   <option value="赤" data-val="デザインA">赤</option>
   <option value="青" data-val="デザインA">青</option>
   <option value="緑" data-val="デザインB">緑</option>
   <option value="黄" data-val="デザインB">黄</option>
 </select>
</div>
```
```jQuery
var children = $('.childen');
var original = children.html();
$('.parent').change(function() {
 var thisChildren = $(this).parent().next().children(children);
 var val1 = $(this).val();
 
 thisChildren.html(original).find('option').each(function() {
   var val2 = $(this).data('val');
   if (val1 != val2) {
     $(this).not(':first-child').remove();
   }
 });
 if ($(this).val() == "") {
   $thisChildren.attr('disabled', 'disabled');
 } else {
   $thisChildren.removeAttr('disabled');
 }
});
```
  • jQuery

    13084 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る