Форум

ureech · #1 (**permalink**) 16.03.2016, 19:31

Здравствуйте.Подскажите как можно осуществить следующие.
Есть ф-ция на 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 · #2 (**permalink**) 16.03.2016, 20:21

Сообщение от ureech

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

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

ureech · #3 (**permalink**) 16.03.2016, 21:29

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

bes · #4 (**permalink**) 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 · #5 (**permalink**) 17.03.2016, 12:38

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

ureech · #6 (**permalink**) 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 · #7 (**permalink**) 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 · #8 (**permalink**) 17.03.2016, 16:32

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

Dilettante_Pro · #9 (**permalink**) 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 · #10 (**permalink**) 17.03.2016, 21:42

Хитро.

Форум

Справочник

Discord чат

Курсы javascript