Форум

eddin · #1 (**permalink**) 01.12.2015, 12:41

Добрый день. Есть такой HTML-код

<form name="main" id="main"> 
	<select name="sel">
		<option value="0">Выберите</option>
		<option value="24">Раз</option>
		<option value="25">Два</option>
		<option value="26">Три</option>
	</select>

	<select name="sel">
		<option value="0">Выберите</option>
		<option value="24">Раз</option>
		<option value="25">Два</option>
		<option value="26">Три</option>
	</select>
</form>

Количество select может быть любым, нахождение select по ID невозможно, т.к. в коде его не будет.
Пожалуйста, подскажите, как с помощью JS узнать в каком именно select в каждый текущий момент изменяется значение (выбирается option) и на какое.

Пробовал вот так, но что-то не работает:

function chck_sel() {
var sel = document.getElementsByName("sel"),

thissel = this.sel;

alert(thissel);

}
chck_sel();

рони · #2 (**permalink**) 01.12.2015, 12:50

eddin,
что мешает обойти циклом все селекты и получить значения?

eddin · #3 (**permalink**) 01.12.2015, 13:03

рони, я думал это не самый оптимальный вариант...
К тому же у всех селектов одинаковый name="sel", поэтому даже если "обойти циклом все селекты и получить значения", то проблематично будет получить значение того селекта, которое было изменено в текущий момент. Конечно можно, но это получится код, где при каждом изменении одного из селектов придется сначала запоминать предыдущее состояние всех селектов, а затем сравнивать с новыми значениями и таким образом вычислять тот селект, который был изменен...
Ну а всё же можно как-то получить аналог вот такого?

function chck_sel() {
this_option_value = document.getElementById("sel").options.selectedIndex+1;
    alert("Выбран "+this_option_value+" элемент списка");
}

При условии, что у select-ов нет ID и class, но есть name="sel"

рони · #4 (**permalink**) 01.12.2015, 13:40

eddin,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
<form name="main" id="main" >
	<select name="sel">
		<option value="0">Выберите</option>
		<option value="24">Раз</option>
		<option value="25">Два</option>
		<option value="26">Три</option>
	</select>

	<select name="sel">
		<option value="0">Выберите</option>
		<option value="24">Раз</option>
		<option value="25">Два</option>
		<option value="26">Три</option>
	</select>
</form>
<script>
window.addEventListener('DOMContentLoaded', function() {
  var form = document.querySelector('#main'),
  select = form.querySelectorAll('select'),
  arr;
  form.addEventListener('change', function() {
    arr = [].map.call( select, function(sel) {
         return sel.value
     });
  alert(arr)
  });
    });
</script>
</body>

</html>

eddin · #5 (**permalink**) 01.12.2015, 14:25

рони, спасибо! Но это не совсем то... Эта функция возвращает значения всех селектов. Но как узнать какой именно был изменен? Ведь количество селектов может быть любым, как и их значения по умолчанию.
Ну вот например требуется поменять цвет текста того селекта, значение которого поменялось. При этом неважно на какое значение оно поменялось, например это новое значение может быть таким же, как у нескольких других селектов, но цвет текста меняется только у него.
Загонять значения всех селектов в массив перед изменением и потом после изменения обходить все селекты и сравнивать?

рони · #6 (**permalink**) 01.12.2015, 15:02

eddin,
поставьте функцию на все селекты на событие 'change' и ничего не вычисляйте просто меняйте цвет если вам так нужно.

рони · #7 (**permalink**) 01.12.2015, 15:06

eddin,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
 .red{
   background-color: rgba(0, 128, 0, 1);
 }

  </style>
</head>

<body>
<form name="main" id="main" >
	<select name="sel">
		<option value="0">Выберите</option>
		<option value="24">Раз</option>
		<option value="25">Два</option>
		<option value="26">Три</option>
	</select>

	<select name="sel">
		<option value="0">Выберите</option>
		<option value="24">Раз</option>
		<option value="25">Два</option>
		<option value="26">Три</option>
	</select>
</form>
<script>
window.addEventListener('DOMContentLoaded', function() {
  var form = document.querySelector('#main'),
  select = form.querySelectorAll('select');
  form.addEventListener('change', function(event) {
      event.target.name && event.target.name == 'sel' && event.target.classList.add('red')

  });
    });
</script>
</body>

</html>

eddin · #8 (**permalink**) 01.12.2015, 15:35

рони, спасибо! Эх, форум не дает вам плюсануть, пишет, что надо сначала кому-то другому это сделать...

Форум

Справочник

Discord чат

Курсы javascript