<div class="wrapper">
<select name="gender">
  <option value="female">Женщины</option>
  <option value="male">Мужчины</option>
</select>
<br />
<select name="names">
  <option value="1">Наталия</option>
  <option value="5">Анна</option>
  <option value="7">София</option>
</select>
</div>

body {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

select {
  outline: none;
  font-size: 1.5rem;
  width: 10rem;
  margin: .5rem;
}

let prices = {"female":[{value:1,desc:"Наталия"},{value:2,desc:"Анна"},{value:3,desc:"София"}],
             "male":[{value:1,desc:"Иван"},{value:2,desc:"Егор"},{value:3,desc:"Денис"}]}

document.querySelector('select[name=gender]').addEventListener('change', function(e) {
  document.querySelector('select[name=names]').innerHTML = prices[this.value].reduce((acc, elem) => `${acc}<option value="${elem.value}">${elem.desc}</option>`, "");
});