Триггер onchange элемента выбора HTML для уже выбранной опции

У меня есть следующий HTML-код, содержащий раскрывающийся список (один выбор)

        <script type="text/javascript">
            $(document).ready(function () {
                $("#garden").bind('change', function() {
                    alert("Changed");
                    });
            });
        </script>
    <body>
        <div id="content">  
           <select id="garden">
             <option value="flowers">Flowers</option>
             <option value="shrubs">Shrubs</option>
             <option value="trees">Trees</option>
             <option value="bushes">Bushes</option>                 
           </select>
        </div>
    </body>
</html>

Когда HTML-страница визуализируется, Flowers является уже выбранным элементом в раскрывающемся списке по умолчанию (первым). Если я выбираю любое другое значение (кроме цветов), функция Javascript запускается и отображается окно предупреждения, содержащее Changed.

Q1: Но если я снова выберу Flowers, событие onchange не сработает. Я понимаю, что это потому, что в раскрывающемся списке ничего не было «изменено». Есть ли способ запустить функцию, даже если в раскрывающемся списке уже выбранное значение не изменяется?

Q2: Как извлечь значение элемента, который только что был выбран (даже если ничего нового не было выбрано, то есть пользователь щелкнул раскрывающийся список и просто щелкнул где-то еще).

Я уже пробовал onblur, но для этого требуется, чтобы пользователь щелкнул где-то еще в документе, чтобы раскрывающийся список потерял фокус. Любая помощь могла бы быть полезна.

[Для краткости я удалил заголовки HTML и другие включения скриптов во фрагменте кода.]


javascript html jquery select jquery-events
person Shrey    schedule 28.07.2010    source источник

Ответы (5)


arrow_upward
4
arrow_downward

Ну, я думаю, что не понимаю вас на 100%, но вот некоторые вещи, которые я могу предложить:

  • привязать обработчик события клика к select

    $("#garden").bind('click', function() {
     alert($(this).find('option:selected').text());
});

  • привязать обработчик события focusout

    $("#garden").bind('focusout', function() {
     alert($(this).find('option:selected').text());
});

и, конечно же, привяжите обработчик событий change, который у вас уже есть. click event handler может быть немного сложнее, так как он срабатывает каждый раз, когда вы нажимаете на элемент. Но если вы не alert() делаете это каждый раз, это вообще не должно быть проблемой, вы получаете текущий выбор и можете делать с ним все, что хотите.

person jAndy    schedule 28.07.2010

arrow_upward
3
arrow_downward

Вы можете вручную вызвать событие при загрузке страницы:

$(document).ready(function() {
    $("#garden").bind("change", function() {
        // ...
    }).change();
});

Это подберет начальное значение, поэтому я думаю, что ваш второй вопрос не имеет значения. Это не будет работать во всех ситуациях (я надеюсь, что ваш фактический обработчик не предупреждение, а на самом деле что-то полезное!), но может пригодиться...

person Jon    schedule 28.07.2010
comment
Хм, интересное предложение. Вернусь после того, как попробую. - person Shrey; 28.07.2010

arrow_upward
2
arrow_downward

Вы уверены, что то, что вы делаете, является наиболее разумным способом делать вещи? Кажется очень странным, что пользовательский интерфейс имеет другое поведение, если вы выбираете элемент, оставляя его по умолчанию, по сравнению с его выбором, открывая выбор и выбирая текущий выбранный элемент.

Если вы хотите, чтобы они явно выбирали цветы, то, возможно, вам нужна фиктивная запись вверху с надписью «Пожалуйста, выберите один», что будет означать, что они вынуждены фактически перейти на цветы, если они этого хотят. Вероятно, это было бы проще, чем усложнять код дополнительными обработчиками событий и тому подобным.

Если вам действительно нужно идти по пути, по которому вы идете, вы можете подумать о том, как будет вести себя, если кто-то просто перейдет к элементу управления, а затем пропустит его. т.е. это также должно запускать ваш скрипт?

Изменить, чтобы отвечать на комментарии подробно:

Что вам нужно сделать в этом случае, так это подключиться к обработчику onSubmit формы. Как вы понимаете, это вызывается при отправке формы. Если ваш обработчик вернет false, эта форма не будет отправлена.

Этот обработчик традиционно используется для проверки на стороне клиента путем изучения состояния любых элементов формы, которые вам нужны, и проверки их значений на допустимость. В этом случае вы должны проверить, было ли значение сада «Н/Д» или что-то другое, на что вы его установили, и если это так, появится предупреждение (в простейшем случае) и, возможно, отметьте поля, требующие внимания. Затем пользователь выберет действительную запись (надеюсь), и в следующий раз, когда он отправит вашу проверку, вы вернете true в обработчике, и пользователь может быть счастлив, что он отправил действительный ввод.

Как всегда, стандартная оговорка о том, что любые данные могут быть отправлены на ваш сервер определенным пользователем, поэтому вы не должны предполагать, что только потому, что у вас была эта проверка, вы получаете действительные данные на сервере. :)

person Chris    schedule 28.07.2010
comment
На самом деле, то, что я спросил, было просто потому, что я пробовал обработку событий перед включением в свое приложение. Я понимаю, что нынешняя ситуация (триггер js на основе явного выбора по умолчанию и явный выбор) является плохим пользовательским интерфейсом, и, пожалуйста, выберите именно то, что я хочу. Проблема в том, что пользователь может в конечном итоге выбрать «Пожалуйста, выберите один», и в этом случае мне нужно сообщить ему, что ваши действия недействительны (я также могу быть пассивным — ничего не делать — но это не то, что моя цель). Другая проблема заключается в том, что он не может выбрать «Пожалуйста, выберите один» - какие-нибудь подсказки о том, как это сделать? - person Shrey; 28.07.2010
comment
@Shrey: я ответил на ваш вопрос в своем ответе, поэтому он не превратился в комментарий (который, я думаю, в любом случае был слишком логин). - person Chris; 28.07.2010
comment
Большое спасибо за ваш ответ. Это имеет смысл и кажется наиболее очевидным, что я должен был сделать :) .. Еще раз спасибо. (Поднимаю комментарий, так как я не могу сделать то же самое для «ответа» дважды). - person Shrey; 29.07.2010
comment
@Shrey: С удовольствием. Вот для чего здесь это место. :) - person Chris; 29.07.2010

arrow_upward
0
arrow_downward

Вопрос 1: Я думаю, что событием для этого будет "onSelect".

Вопрос 2: Я думаю, что событие onSelect тоже подойдет для этого, но не уверен на 100%. Хоть что-то попробовать и заморочиться.

person Jimithus    schedule 28.07.2010
comment
Нет, onselect тоже не работает :( На самом деле, onselect даже не срабатывает ни при выборе раскрывающегося списка, ни при повторном выборе какой-либо опции, ни при отпускании мыши, ни при щелчке в любом другом месте документа. Есть идеи, что он делает? ( Извините, я новичок в javascript и HTML) - person Shrey; 28.07.2010

arrow_upward
0
arrow_downward

На мой взгляд, самое простое решение — продублировать первый вариант в отключенный и скрытый элемент с такой же меткой. В раскрывающемся списке будет отображаться метка скрытой опции, но она не будет отображаться в списке.

<select id="garden" name="blabla" onchange="this.form.submit();" >
  <option value="" disabled selected style="display:none;">Flowers</option>
  <option value="flowers" >Flowers</option>
  <option value="shrubs" >Schrubs</option>
  <option value="trees" >Trees</option>
  <option value="bushes" >Bushes</option>
</select>

Ваш вопрос выглядит так же, как HTML SELECT — запускать событие JavaScript ONCHANGE, даже если параметр не изменен, а решение, упомянутое выше, было предоставлено Саймоном Аронссоном.

Примечание: решение отлично работает с Firefox, но не с Internet Explorer.

person OuzoPower    schedule 02.01.2018