プルダウンリストの選択を初期の状態にリセットしたい

Question

<select id="valSelect1" class ="search-listbox val_select" tabindex="1">
   <option value="val1">val1</option>
   <option value="val2" selected>val2</option>
   <option value="val3">val3</option>
   <option value="val4">val4</option>
   <option value="val5">val5</option>
   <option value="val6" >val6</option>
</select>

<button type="button" id="btn">クリア</button>

//ボタンクリック
$("#btn").on("click", function() {
   $('#valSelect1').children('option').each(function(index, option) {
      option.selected = option.defaultSelected;
 　});
});

JavaScript(jQuery)でプルダウンリストの選択を初期の選択状態にリセットしたいのですが上記のコードでは不可能でした。
解決策を教えてください。

Comments

[m.ts10806]

>動きませんでした。
何が起きたのでしょうか。
https://teratail.com/help/question-tips#questionTips3-4-1
また起きた結果をもとに調べたり試したことがあれば追記してください。
https://teratail.com/help/question-tips#questionTips1-2

[m.ts10806]

また「選択をリセット」とはどういう状態を想定されていますでしょうか。

[penginkunkun]

例えばval6に選択してたのを「リセットボタン」を押すと初期選択の「val2」に戻したいのです。

[m.ts10806]

質問は編集できるので追記願います

Answer 1

画面表示時の状態に戻したいならJavaScript不要に思います。

<form>
    <select id="valSelect1" class ="search-listbox val_select" tabindex="1">
       <option value="val1">val1</option>
       <option value="val2" selected>val2</option>
       <option value="val3">val3</option>
       <option value="val4">val4</option>
       <option value="val5">val5</option>
       <option value="val6" >val6</option>
    </select>
    <button type="reset">リセット</button>
</form>

Answer 2

「リセット」の定義がわかりません。
デフォルト値に戻すならformで囲んでresetボタンを押すだけです。
formやresetボタンを設置したくない場合は、デフォルト値を
覚えておいて、なんらかのトリガーでデフォルト値に戻してやればよいでしょう

<script>
$(function() {
  $('#valSelect1').data('defalut',$('#valSelect1').val());
  $('#reset').on('click',function(){
    $('#valSelect1').val($('#valSelect1').data('defalut'));
  });
});
</script>
<form>
<select id="valSelect1" class ="search-listbox val_select" tabindex="1">
   <option value="val1">val1</option>
   <option value="val2" selected>val2</option>
   <option value="val3">val3</option>
   <option value="val4">val4</option>
   <option value="val5">val5</option>
   <option value="val6">val6</option>
</select>
<input type="reset" value="common reset">
<input type="button" value="special reset" id="reset">
</form>

追記

<script>
$(function() {
  $('#valSelect1').data('defalut',$('#valSelect1').prop('selectedIndex'));
  $('#btn').on('click',function(){
    $('#valSelect1').prop('selectedIndex',$('#valSelect1').data('defalut'));
  });
});
</script>

<select id="valSelect1" class ="search-listbox val_select" tabindex="1">
   <option value="val1">val1</option>
   <option value="val2" selected>val2</option>
   <option value="val3">val3</option>
   <option value="val4">val4</option>
   <option value="val5">val5</option>
   <option value="val6" >val6</option>
</select>

<button type="button" id="btn">クリア</button>

Comments

[penginkunkun]

回答して頂いたコードを実行してみました。
プルダウン選択は初期時にリセットされましたが、リストの表示テキストは以前の選択状態のままでした。
リストの表示テキストもリセットしたいのですがどうればよいでしょうか？

[yambejp]

> リストの表示テキストは以前の選択状態のままでした。

ちょっと状況がわからないのですが
追記分でどうでしょうか？

[penginkunkun]

追記して頂いたコードを今編集しているソースファイルで実行してみた所、選択はリセットされるものの、表示テキストはリセットされませんでした。
ですが新規のHTMLファイルで実行してみた所、表示テキストも選択値もリセットされました。

多分、読み込んでいるフレームワーク、ライブラリ等の影響があるのかもしれません。
回答ありがとうございました。