Не корректно работает атрибут onchange в select

181

04 сентября 2019, 01:00

Некорректно работает атрибут onchange. Проблема в том, что при смене первого select не обнуляются другие значения. Вот код:

<form action="https://listryx.com/catalog/" method="get">
  <div class="filter_type">
    <h6>Выберите регион</h6>
    <select name="reg" id="reg" onchange="if(this.value != 0) { this.form.submit(); }">
      <option value="01">Выберите регион</option>
      <option value="52" selected="">Краснодарский край</option>
      <option value="24">Республика Крым</option>
      <option value="59">Ростовская область</option>
    </select>
  </div>
  <div class="filter_type">
    <h6>Город</h6>
    <select name="city" id="reg" onchange="if(this.value != 0) { this.form.submit(); }">
      <option value="01">Выберите город</option>
      <option value="54">Анапа</option>
      <option value="55" selected="">Армавир</option>
      <option value="56">Белореченск</option>
      <option value="57">Геленджик</option>
      <option value="58">Горячий ключ</option>
      <option value="53">Краснодар</option>
    </select>
  </div>
</form>

По умолчанию, когда ничего не выбрано, GET параметры такие: /catalog/?reg=01&city=01 При выбранном регионе, город не выбран. /catalog/?reg=24&city=01 То есть, все корректно работает при выборе региона и в последующем города, но если выбран город, а затем выбирается другой регион, то get параметр city не становится со значением 01. Другими словами не обнуляется.

Можно сделать так, что при выборе другого региона, когда выбран уже город значение get параметра city обнулялось на 01?

Форма расположена на странице: https://listryx.com/catalog/

Answer 1

const reg = document.getElementById("reg"); 
 
const city = document.getElementById("city"); 
 
const handler = function() { 
  if (this.value != 0) { 
    //this.form.submit() 
  } 
} 
 
reg.addEventListener("change", handler); 
 
reg.addEventListener("change", function() { 
  if (this.value != 0) { 
    city.value = "01"; 
  } 
}) 
 
city.addEventListener("change", handler)

<form action="https://listryx.com/catalog/" method="get"> 
 
  <div class="filter_type"> 
    <h6>Выберите регион</h6> 
    <select name="reg" id="reg"> 
      <option value="01">Выберите регион</option> 
      <option value="52" selected="">Краснодарский край</option> 
      <option value="24">Республика Крым</option> 
      <option value="59">Ростовская область</option> 
    </select> 
  </div> 
 
  <div class="filter_type"> 
    <h6>Город</h6> 
 
    <select name="city" id="city"> 
      <option value="01">Выберите город</option> 
      <option value="54">Анапа</option> 
      <option value="55" selected="">Армавир</option> 
      <option value="56">Белореченск</option> 
      <option value="57">Геленджик</option> 
      <option value="58">Горячий ключ</option> 
      <option value="53">Краснодар</option> 
    </select> 
  </div> 
 
</form>