1

Как определить выбранный option по id и запустить привязанную к нему функцию? Может быть, можно вообще что-то наподобие onclick?

function esli_id_1() {alert("1")};
function esli_id_2() {alert("2")};
function esli_id_3() {alert("3")};
function esli_id_4() {alert("4")};
function esli_id_5() {alert("5")};
function esli_id_6() {alert("6")};
<select name="select_5">
<option selected="selected" disabled="disabled">Выбор:</option>
<option id="1" value="Груша">Груша</option>
<option id="2" value="Яблоко">Яблоко</option>
<option id="3" value="Апельсин">Апельсин</option>
<option id="4" value="Мандарин">Мандарин</option>
<option id="5" value="Виноград">Виноград</option>
<option id="6" value="Слива">Слива</option>
</select>

4 ответа 4

2

Определяем id выбранного option и уже по id запускаем нужную функцию:

var select = document.querySelector('select');

select.onchange = function() {
  var indexSelected = select.selectedIndex,
      option = select.querySelectorAll('option')[indexSelected];
      
  var selectedId = option.getAttribute('id');
  
  if( selectedId == '1' ) alert(1);
  if( selectedId == '2' ) alert(2);
  if( selectedId == '3' ) alert(3);
  if( selectedId == '4' ) alert(4);
  if( selectedId == '5' ) alert(5);
  if( selectedId == '6' ) alert(6);
};
<select name="select_5">
  <option selected="selected" disabled="disabled">Выбор:</option>
  <option id="1" value="Груша">Груша</option>
  <option id="2" value="Яблоко">Яблоко</option>
  <option id="3" value="Апельсин">Апельсин</option>
  <option id="4" value="Мандарин">Мандарин</option>
  <option id="5" value="Виноград">Виноград</option>
  <option id="6" value="Слива">Слива</option>
</select>

Или заранее можно создать у элемента нужную функцию и уже по выбору вызывать функцию выбранного option:

var select = document.querySelector('select'),
    options = document.querySelectorAll('select option');

// Создаём цикл для всех option
for(var i = 0; i < options.length; i++){
  // Присваиваем для всех option свою функцию
  options[i].my_function = function() {
    alert( this.getAttribute('id') );
  };
};

select.onchange = function() {
  var indexSelected = select.selectedIndex,
      option = select.querySelectorAll('option')[indexSelected];
  
  // Запускаем функцию выбранного option
  option.my_function();
};
<select name="select_5">
  <option selected="selected" disabled="disabled">Выбор:</option>
  <option id="1" value="Груша">Груша</option>
  <option id="2" value="Яблоко">Яблоко</option>
  <option id="3" value="Апельсин">Апельсин</option>
  <option id="4" value="Мандарин">Мандарин</option>
  <option id="5" value="Виноград">Виноград</option>
  <option id="6" value="Слива">Слива</option>
</select>

1

Событие change происходит при смене значения.

function esli_id_1() {alert("1")};
function esli_id_2() {alert("2")};
function esli_id_3() {alert("3")};
function esli_id_4() {alert("4")};
function esli_id_5() {alert("5")};
function esli_id_6() {alert("6")};

document.querySelector('[name="select_5"]').addEventListener('change', function(){
  // В selectedOptions находится массив выбранных значений
  // Берём первое (это элемент option) и берём его id
  // Формируем функцию, хотя лучше сделать switch...case или общую обработку, что лучше
  window['esli_id_' + this.selectedOptions[0].id]();
});
<select name="select_5">
<option selected="selected" disabled="disabled">Выбор:</option>
<option id="1" value="Груша">Груша</option>
<option id="2" value="Яблоко">Яблоко</option>
<option id="3" value="Апельсин">Апельсин</option>
<option id="4" value="Мандарин">Мандарин</option>
<option id="5" value="Виноград">Виноград</option>
<option id="6" value="Слива">Слива</option>
</select>

0

как вариант

$('select').change(function(e){
   var id = $(this).find(':selected').attr('id')
   var funcName = 'esli_id_'+id;
   myCallback[funcName]();
});
var myCallback = {
  esli_id_1 : function() {alert("1")},
  esli_id_2 : function() {alert("2")},
  esli_id_3 : function() {alert("3")},
  esli_id_4 : function() {alert("4")},
  esli_id_5 : function() {alert("5")},
  esli_id_6 : function() {alert("6")},
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select name="select_5">
<option selected="selected" disabled="disabled">Выбор:</option>
<option id="1" value="Груша">Груша</option>
<option id="2" value="Яблоко">Яблоко</option>
<option id="3" value="Апельсин">Апельсин</option>
<option id="4" value="Мандарин">Мандарин</option>
<option id="5" value="Виноград">Виноград</option>
<option id="6" value="Слива">Слива</option>
</select>

0

Вы неправильно используете атрибут id. Этот атрибут должен быть уникальным среди всех элементов страницы.

Атрибут value у option предназначен как раз для вашей цели:

var select = document.querySelector('[name=select_5]');

// добавляем ваши обработчики прямо в option
for (let i = 0; i < select.options.length; ++i) {
  select.options[i].foo = function() {
    console.log(this.value, this.text);
  }
}


select.onchange = function() {
  // console.log(this.value);
  // Получить текст option можно так
  // console.log(this.options[this.selectedIndex].text);
  this.options[this.selectedIndex].foo();
};
<select name="select_5">
  <option selected="selected" disabled="disabled">Выбор:</option>
  <option value="1">Груша</option>
  <option value="2">Яблоко</option>
  <option value="3">Апельсин</option>
  <option value="4">Мандарин</option>
  <option value="5">Виноград</option>
  <option value="6">Слива</option>
</select>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.