Как определить выбранный 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>
Определяем 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>
Событие 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>
как вариант
$('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>
Вы неправильно используете атрибут 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>
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Вот такая у меня форма в макете http://joxiru/J2b5xvLs91Rgm6 нашел плагин для select, а вот как внутри него сделать красивый скролл, не знаю, буду благодарен...
Добрый вечерВ общем мне нужно скопировать текст из <div> в <meta name="description" content=""> при помощи JQ