jquery - jqueryはドロップダウンリストから要素を非表示にします

Question

ドロップダウンリストから選択された属性を持つ要素を表示し、他のすべてを非表示にする必要があります

   <select id="date-selector">
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
    </select>



  <div class="test" data-number="7">Seven</div>
    <div class="test" data-number="7">Another Seven</div>
    <div class="test" data-number="7">Another Seven</div>
    <div class="test" data-number="7">Another Seven</div>
    <div class="test" data-number="8">Eight</div>
    <div class="test" data-number="8">Another Eight</div>
    <div class="test" data-number="9">Nine</div>
    <div class="test" data-number="9">Another Nine</div>
    <div class="test" data-number="9">Another Nine</div>

ここで、7 を選択すると、7 以外のすべての要素を非表示にする必要があります。

jquery hide() を使用してこれを行うにはどうすればよいですか?

注: 同じデータ属性を持つ複数の要素があり、クラス "test" を持つすべての要素を非表示にすることはできません。属性が 7 以外の要素を非表示にする必要があります。