Определить выбранный option и запуск функции

281
22 марта 2017, 17:54

Как определить выбранный 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>

Answer 1

Определяем 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>

Answer 2

Событие 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>

Answer 3

как вариант

$('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>

Answer 4

Вы неправильно используете атрибут 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>

READ ALSO
Как стилизовать select и в нем скролл?

Как стилизовать select и в нем скролл?

Вот такая у меня форма в макете http://joxiru/J2b5xvLs91Rgm6 нашел плагин для select, а вот как внутри него сделать красивый скролл, не знаю, буду благодарен...

310
Копирование текста из div в meta

Копирование текста из div в meta

Добрый вечерВ общем мне нужно скопировать текст из <div> в <meta name="description" content=""> при помощи JQ

221