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

У меня есть следующий 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 запущена, и окно предупреждений, содержащее "Измененный", показывают.

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

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

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

Большое спасибо. [Я вырезал заголовки HTML, и другие включения сценария во фрагмент кода предусмотрели краткость.]

12
задан Shrey 28 July 2010 в 15:18
поделиться

4 ответа

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

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

     $ ("# garden"). Bind ('щелчок', function () {
    alert ($ (это) .find ('option: selected'). text ());
    });
    
  • привязать обработчик события focusout

     $ ("# garden"). Bind ('focusout', function () {
    alert ($ (это) .find ('option: selected'). text ());
    });
    

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

3
ответ дан 2 December 2019 в 22:51
поделиться

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

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

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

Отредактируйте, чтобы ответить на подробный комментарий:

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

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

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

2
ответ дан 2 December 2019 в 22:51
поделиться

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

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

0
ответ дан 2 December 2019 в 22:51
поделиться

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

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

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

3
ответ дан 2 December 2019 в 22:51
поделиться
Другие вопросы по тегам:

Похожие вопросы: