How to determine the selected option by id and run the function associated with it? Maybe you can do something like 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 answers 4

    We define the id of the selected option and by id start the necessary function:

     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>

    Or, in advance, you can create the desired function for an element and, optionally, call the function of the selected 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>

      The change event occurs when the value changes.

       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>

        as an option

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

          You are using the id attribute incorrectly. This attribute must be unique among all page elements.

          The value attribute of the option designed just for your purpose:

           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>