Change Select options

Change a selections options based on another select option selected

HTML

<p>
 Publisher
</p>
<select id="gender" name="publisher">
  <option value="v">(v) 1010TIRES.COM INC.</option>
  <option value="f">(f) Action Sports Connection</option>
</select>
<p>
Site
</p>


<select id="type" name="site">
  <option value="v1" data-pub="v">(v1) 80sfunnycars.com</option>
  <option value="v2" data-pub="v">(v2) MechanicVideos.net</option>
  <option value="v3" data-pub="v">(v3) advrider.com</option>
  <option value="f1" data-pub="f">(f1) atvdirt.com</option>
  <option value="f2" data-pub="f">(f2) utvdirt.com</option>
</select>

CSS

body {
  
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

$('#gender').on('change', function(e) {
      let selector = $(this).val();
      $("#type > option").hide();
      $("#type > option").filter(function(){return $(this).data('pub') == selector}).show();
});