Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Обработчик у Select (https://javascript.ru/forum/dom-window/61939-obrabotchik-u-select.html)

ureech 16.03.2016 19:31

Обработчик у Select
 
Здравствуйте.Подскажите как можно осуществить следующие.
Есть ф-ция на php, возвращает селект с опшион.На селекте висит onchange.
<select name="region" onchange="$(\'form#obform\').submit();">
<option value='...'>test</option>
</select>

Нужно добавить ещё один опшион со своим onchange, что бы на него не влиял submit в селекте.
<select name="region" onchange="$(\'form#obform\').submit();">
<option value='...'>test</option>
<option onchange="..." value='...'>test2</option>
</select>

bes 16.03.2016 20:21

Цитата:

Сообщение от ureech
Нужно добавить ещё один опшион со своим onchange, что бы на него не влиял submit в селекте.

оно?
https://learn.javascript.ru/event-bu...сплытия

ureech 16.03.2016 21:29

Возможно.событие с submit останавливает, но проверить работает ли его событие не могу пока.Так правильно будет?
<option onclick="event.stopPropagation();" onchange="..." value='...' >Выбрать другой...</option>

bes 16.03.2016 23:58

Цитата:

Сообщение от ureech
Возможно.событие с submit останавливает, но проверить работает ли его событие не могу пока.Так правильно будет?
<option onclick="event.stopPropagation();" onchange="..." value='...' >Выбрать другой...</option>

почти :)
во-первых, пытаемся остановить не click, а change
во-вторых, непонятно, что такое change на option
https://www.w3.org/TR/DOM-Level-2-Ev...ngs-htmlevents
Цитата:

change
The change event occurs when a control loses the input focus and its value has been modified since gaining focus. This event is valid for INPUT, SELECT, and TEXTAREA. element.
Bubbles: Yes
Cancelable: No
Context Info: None

Dilettante_Pro 17.03.2016 12:38

ureech,
bes,
Надо в одном обработчике на change, привязанном к select, делать ветвление в зависимости от выбранного option

ureech 17.03.2016 14:36

Цитата:

Сообщение от bes
во-вторых, непонятно, что такое change на option

Пока ничего, но по задумке скорее всего будет всё таки onclick и на него ф-ция, как то так
<option onclick="event.stopPropagation();$(this).ajax_function()" value="">Выбрать другой...</option>

Но пока не написал аякс запрос для выбора города и поэтому не знаю сработает или нет.
Цитата:

Сообщение от Dilettante_Pro
Надо в одном обработчике на change, привязанном к select, делать ветвление в зависимости от выбранного option

Можно пример?

Dilettante_Pro 17.03.2016 16:22

<!DOCTYPE HTML>
<html>
<head>
<title></title>
<script>
    function tstsel(opt) {
        switch (opt.value) {
            case "1":
                alert("Выбран первый");
                break;
            case "2":
                alert("Выбран второй");
                break;
            default:
                alert("Выберите что-нибудь конкретное");
        }
    }
</script>
</head>
<body>
   <select name="test" onchange="tstsel(this);">
      <option>---</option> 
      <option value="1">test1</option>
      <option value="2">test2</option>
   </select>
</body>
</html>

И делайте в кейсах что хотите

ureech 17.03.2016 16:32

Dilettante_Pro,
Спасибо, понятно. Буду попробовать.:)

Dilettante_Pro 17.03.2016 17:17

ureech,
Более хитрый вариант - с группировкой option по видам действий
Можно выполнять определенные действия с разными value в качестве параметра
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<script>
    function tstsel(opt) {
        for (var i= 0; i < opt.options.length; i++) { 
         if (opt.options[i].selected) var _opt = opt.options[i];
        }
        switch (_opt.dataset.class) {
            case "simplex":
                alert("Выбран класс simplex " + opt.value);
                break;
            case "complex":
                alert("Выбран класс complex " + opt.value);
                break;
            default:
                alert("Выберите что-нибудь конкретное");
        }
    }
</script>
</head>
<body>
   <select name="test" onchange="tstsel(this);">
      <option data-class="empty">---</option> 
      <option data-class="simplex" value="1">test1</option>
      <option data-class="complex" value="2">test2</option>
      <option data-class="simplex" value="3">test3</option>
      <option data-class="complex" value="4">test4</option>
   </select>
</body>
</html>

ureech 17.03.2016 21:42

Хитро.:)


Часовой пояс GMT +3, время: 20:45.