Активировать селектор, только при заполнении предыдущего селектора

Рейтинг: 1Ответов: 2Опубликовано: 05.05.2015

Добрый день, есть 3 селектора http://prntscr.com/71q7pk, подскажите пожалуйста как сделать, чтобы пока не заполнен первый селектор, второй оставался не активным, и так же со следующим селектором.

css javascript html jquery
Источник: Stack Overflow на русском

Ответы

▲ 2Принят

Например так:

function initSelectors(container) {
  var select1 = container.querySelector('[name=select1]');
  var select2 = container.querySelector('[name=select2]');
  var select3 = container.querySelector('[name=select3]');
  select1.addEventListener('change', function() {
    select2.disabled = false;
  });
  select2.addEventListener('change', function() {
    select3.disabled = false;
  });
}
<div id="selects">
  <select name="select1">
    <option selected disabled>выберите</option>
    <option value="value1">value1</option>
    <option value="value2">value2</option>
  </select>
  <select name="select2" disabled>
    <option selected disabled>выберите</option>
    <option value="value1">value1</option>
    <option value="value2">value2</option>
  </select>
  <select name="select3" disabled>
    <option selected disabled>выберите</option>
    <option value="value1">value1</option>
    <option value="value2">value2</option>
  </select>
</div>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    var container = document.getElementById('selects');
    initSelectors(container);
  });
</script>

Еще рекомендую почитать про создание своих компонентов на js+html, например тут, это гораздо более гибкий подход, чем городить логику js в разметке

▲ 1

Можно например так:

<select id=s1  onchange=f(this,document.getElementById("s2")) >
<option value=0></option>
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
</select>
<select id=s2 disabled=true  onchange=f(this,document.getElementById("s3") >
<option value=0></option>
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
</select>
<select id=s3 disabled=true >
<option value=0></option>
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
</select>

<SCRIPT>
function f(ss,ss1){s=ss.getElementsByTagName("option");
if(ss.value!==s[0].value)ss1.disabled=false
}
</SCRIPT>