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

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

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

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

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

ОТВЕТЫ

Ответ 1

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

  • привязать обработчик события click к 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(), то каждый раз, когда это не должно быть проблемой, вы получаете текущий выбор и можете делать с ним все, что захотите.

Ответ 2

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

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

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

Ответ 3

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

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

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

Отредактируйте для ответа на комментарий:

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

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

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

Ответ 4

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

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

Ответ 5

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

<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, даже если параметр не изменен и упомянутое выше решение было предоставлено Саймоном Аронссоном.

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