HTML триггер замены элемента для уже выбранной опции - PullRequest
12 голосов
/ 28 июля 2010

У меня есть следующий 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 и другие включения скриптов во фрагменте кода, предоставленном для краткости.]

Ответы [ 5 ]

3 голосов
/ 28 июля 2010

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

3 голосов
/ 28 июля 2010

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

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

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

2 голосов
/ 28 июля 2010

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

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

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

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

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

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

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

0 голосов
/ 02 января 2018

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

<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.

0 голосов
/ 28 июля 2010

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...