質問編集履歴

1 誤字

melRel score 12

2018/10/12 13:23  投稿

2つのセレクトボックスを連動させたものを同じページで複数使いたい

1つ目のセレクトボックスで選んだ値に合わせて、2つ目のセレクトボックスに表示される選択肢が変わるセレクトボックスを下記の記事を参考に作りました。

https://try-m.co.jp/blog/web-create/936/

それを同じページに２つ設置したいので、1つ目のセレクトボックスを選択したときに、

選択をしたセレクトボックスの下にある２つ目のセレクトボックスのみと連動するように変更したいのですが、

セレクトボックス１の２つ目とセレクトボックス２の２つ目のoptionのテキストの値をそれぞれ取得して、どう

出し分けたらいいのか分からず困っています。

```html

<!-- セレクトボックス１ -->

<!-- 連動セレクトボックス１ -->

<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オブジェクト」のメソッドとして定義されています。 Myタグに追加