[jQuery]セレクトボックスで選んだものによって要素の表示/非表示させたい

Question

選択された<select>のvalue値と<input>のdata-valの値が一致したもののみを表示させたいです。
試してみたjqueryも載せておきますが、もっと簡単な方法があれば教えていただきたいです。
例えば、あらかじめ配列とvalue値が空の<li>を用意しておいて、そこに値が一致したものの配列を<li>のvalue値に代入して表示させるなど。これがそもそも実現可能なのかも分かりませんが…（無視していただいて構いません。）
実際はhtmlのリストがすごい量になるので、簡易化できればと…

<div class="select_box">
　<select class="parent">
　　<option></option>
　　<option value="select01">①</option>
　　<option value="select02">②</option>
　</select>
</div>

<ul>
　<li class="children">
　　<input type="text" value="①の子要素1" data-val="select01">
　</li>
　<li class="children">
　　<input type="text" value="①の子要素2" data-val="select01">
　</li>
　<li class="children">
　　<input type="text" value="①の子要素3" data-val="select01">
　</li>
　<li class="children">
　　<input type="text" value="②の子要素1" data-val="select02">
　</li>
　<li class="children">
　　<input type="text" value="②の子要素2" data-val="select02">
　</li>
　<li class="children">
　　<input type="text" value="②の子要素3" data-val="select02">
　</li>
</ul>

※<li>はdisplay:none;で非表示状態

var $children = $('.children');
var original = $children.html();

$(' .parent').change(function() {

  var val1 = $(this).val();

  $children.html(original).find('input').each(function() {
    var val2 = $(this).data('val');
    if (val1 = val2) {
       $(this).parents('.children').show();
    }
});

よろしくお願い致します。

Comments

[yc-www10]

現在だと、①を選択した時、①の子要素1しか表示されません。
実際はこの時に、①の子要素1、①の子要素2、①の子要素3のすべて表示させたいです。
また、①を選択したあと、②に選択を変更した場合に、②の子要素1~3を表示させ、
①の子要素は非表示になる。ということをしたいです。

[yc-www10]

上記を修正しました。

Answer 1

$(function(){
  $('.parent').on('change',function(){
    $('.children').hide().filter(function(){
      return $('[data-val]',this).data('val')==$('.parent').val();
    }).show();
  }).eq(0).trigger('change');
});

Comments

[yc-www10]

回答ありがとうございます。
①を選択した時、①の子要素1が6個表示されます。この6個は<li>の数なので、最初の①の子要素1がすべての<li>のvalue値に入力され表示されているのではないかと思います。
また、②に選択を変更した時には何も表示されません…
追記に書いた内容を実行したいと考えています。

Answer 2

これでどうでしょうか？

$(function() {
  $('.parent').on('change', function() {
    let value = $(this).val();
    $('.children').find('input').each(function() {
      if (value == $(this).data('val')) {
        $(this).parents('.children').show();
      } else {
        $(this).parents('.children').hide();        
      }
    });
  });
});

Comments

[yc-www10]

①を選択した時、①の子要素1が6個表示されます。この6個は<li>の数なので、最初の①の子要素1がすべての<li>のvalue値に入力され表示されているのではないかと思います。
また、②に選択を変更した時には何も表示されません…
追記に書いた内容を実行したいと考えています。

[PlugOut777]

> ①を選択した時、①の子要素1が6個表示されます。
差し替えられたHTMLを用いても、このような挙動は確認できませんでした。
こちらの環境では、以下の挙動を確認しています。

①を選択した場合は[①の子要素1][①の子要素2][①の子要素3]が表示
②を選択した場合は[②の子要素1][②の子要素2][②の子要素3]が表示
選択を空にした場合は何も表示されない

ここからは可能性の話になりますが
JavaScriptが正常に反映されていないのではないでしょうか？
ブラウザのキャッシュを削除して試してみてください。
或いは同じページで利用している別のJavaScriptが想定外の動きをしていませんか？

[yc-www10]

ありがとうございます！正常に動きました！

他のJavaScriptが関係していたようです！