Событие Fire каждый раз, когда элемент DropDownList выбран с помощью jQuery

Ответ 1

Чтобы развернуть предложение Vincent Ramdhanie, взгляните на это. По сути, вы получаете свою собственную функцию jQuery, которую вы можете повторно использовать в другом месте.

Шаг 1: создайте функцию jQuery

(function($) {
    $.fn.selected = function(fn) {
        return this.each(function() {
            var clicknum = 0;
            $(this).click(function() {
                clicknum++;
                if (clicknum == 2) {
                    clicknum = 0;
                    fn(this);
                }
            });
        });
    }
})(jQuery);

Шаг 2. Убедитесь, что для вновь созданного файла функции jQuery ссылка используется:

<script src="Scripts/jqDropDown.js" type="text/javascript"></script>

Шаг 3. Используйте новую функцию:

$('#MyDropDown').selected(function() {
    //Do Whatever...
});

ОРИГИНАЛЬНАЯ ИНФОРМАЦИЯ
С вашей текущей базой кода, выбрав одно из значений asp: DropDownList не будет запускать событие изменения.

Вы можете попробовать добавить еще одну функцию jQuery для события .blur. Это срабатывает, когда управление теряет фокус:

$('#dropdownid').blur(function() {......});

Если функция размытия не работает для вас, я бы добавил кнопку обновления или что-то подобное, что вызывает функцию, которую вы пытаетесь использовать.

Ответ 2

Попробуйте следующее:

$(document).ready(function(){
 var clicknum = 0;
 $("#dropdownid").click(function(){
    clicknum++;
    if(clicknum == 2){
        alert($(this).val());
        clicknum = 0;
    }
 });
});

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

Если щелчок num окажется равным 2, то это второй щелчок, чтобы запустить событие и reset clicknum в 0 в следующий раз. В противном случае ничего не делать.

Ответ 3

Просто подключайте обработчики событий подключений к закрытым элементам управления, а не выберите:

$('#dropdownid option').click(function() {......});

Это будет срабатывать только при выборе опции из выпадающего меню, независимо от того, изменяется ли она.

Ответ 4

В соответствии с API:

Событие изменения срабатывает, когда элемент управления теряет фокус ввода и его значение был изменен с момента получения фокуса.

В качестве альтернативы вы можете попробовать использовать mousedown или click events.

Ответ 5

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

Некоторые сценарии, которые следует учитывать:

• Если вы нажмете, затем выключите, затем снова включите, он будет считать как клики, так и огонь.
• В firefox вы можете открыть меню одним щелчком мыши и перетащить на выбранный вариант, не поднимая при этом свою мышь.
• Если вы используете какую-либо комбинацию штрихов клавиатуры, вы, скорее всего, получите счетчик кликов вне синхронизации или вообще пропустите событие изменения.
  • Вы можете открыть раскрывающийся список с помощью Alt + ↕ (или Spacebar в Chrome и Opera).
  • Когда выпадающая панель имеет фокус, любая из клавиш со стрелками изменяет выделение
  • Когда раскрывающееся меню открыто, нажатие Tab или Enter сделает выбор

Здесь более полное расширение:

Самый надежный способ увидеть, была ли выбрана опция, - использовать change событие, с которым вы можете работать с jQuery .change() обработчик.

Единственное, что нужно сделать, это определить, был ли снова выбран исходный элемент.
Это было задано много (один, два, три) без особого ответа в любой ситуации.

Простейшей задачей было бы проверить, было ли событие click или keyup в элементе option:selected НО Chrome, IE и сафари, похоже, не поддерживают события на option элементах, хотя они находятся в Рекомендация w3c

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

Следующая лучшая вещь, похоже, обрабатывает событие blur. Это будет означать, что пользователь сосредоточился на выпадающем списке (возможно, видел список, возможно, нет) и принял решение, что они хотели бы придерживаться первоначального значения. Чтобы продолжить обработку изменений, мы все равно будем подписываться на событие change. И чтобы убедиться, что мы не умножим счет, мы установим флаг, если событие изменения было поднято, поэтому мы не возвращаемся дважды:

Код:

(function ($) {
    $.fn.selected = function (fn) {
        return this.each(function () {
            $(this).focus(function () {
                this.dataChanged = false;
            }).change(function () {
                this.dataChanged = true;
                fn(this);
            }).blur(function (e) {
                if (!this.dataChanged) {
                    fn(this);
                }
            });
        });
    };
})(jQuery);

Затем назовите это:

$("#dropdownid").selected(function (e) {
    alert('You selected ' + $(e).val());
});

Обновлен пример в jsFiddle

Ответ 6

Посмотрите это решение:
http://ledomoon.blogspot.com/2009/12/dropdown-selected-change-event-by.html

$(document).ready(function () {
    // select all the divs and make it invisible
    $("div.Content").css("display", "none");
    // Find all the combos inside the table or gridview
    $("#tblItems").find("select.Status").each(function () {
        // Attached function to the change event of each combo
        $(this).change(function () {
            if ($(this).val() == "test1") {
                // Change the visibility of the next div after the selected combo if the selected value = test1
                $(this).parent().find("div.Content").fadeIn("slow"); //css("display","block");
            } else {
                $(this).parent().find("div.Content").fadeOut("slow"); //.css("display","none");
            }
        });
    });
});

Надеюсь, что это поможет

Ответ 7

Эта проблема возникает из-за обработки клиентом базового HTML-кода. Поскольку большинство клиентов не собираются отмечать не изменения, вам придется попробовать что-то другое.

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

Ответ 8

Выбранный элемент выпадающего списка должен отображать уже сделанный выбор.

Мое предложение состоит в reset выпадающем списке по умолчанию, например "Выбрать...", каждый раз, когда требуемое действие завершено. Итак, если пользователю необходимо выполнить Action A дважды, выпадающее меню будет reset после каждого действия.

• Пользователь выбирает действие A из раскрывающегося списка.
• Действие A выполняется, а выпадающее меню reset.
• Пользователь выбирает действие A из раскрывающегося списка.
• Действие A выполняется, а выпадающее меню reset.

Надеюсь, что это поможет,

Рич

Ответ 9

Для меня следующее решение отлично работало:

$("#dropdownid select").click(function() {
  alert($("#dropdownid select option:selected").html());
});

Ответ 10

также:

$('#dropdownid select option').click(function() {
   ....
}