Оповещение о выпадающем списке выбора

Question

Я пытаюсь открыть оповещение, используя библиотеку alerttify, когда значение из раскрывающегося списка равно "0", и пользователь пытается нажать кнопку "Добавить еще один план". По какой-то причине оповещение не приходит.

JS для библиотеки alerttify работает нормально, как я тестировал в других сценариях, и она всплывала, но по какой-то причине в этом сценарии она не работает.

HTML:

<select id="myselect" class="dropdown">
                <option value="0">Please Select Your Plan</option>
                <option value="1">package1</option>
                <option value="2">package2</option>
                <option value="3">package3</option>
                <option value="4">package4</option>
                <option value="5">package5</option>
                <option value="6">package6</option>
            </select>

    <div class="button-plan"><input type="button" value="Add another plan to enjoy more savings!" class="button-hide" /></div>

JS:

$('#myselect').change(function () {
        var val = $(this).val();

        if (val =='0'){
            $(".button-hide"). on (" click " ,function(){
            alertify.alert("You need to atleast select one plan !");                        
            });
                                    }

Скрипка доступна здесь: http://jsfiddle.net/6FLWY/1/

Большое спасибо за вашу помощь, ребята!

Answer 1

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

$(".button-hide").on("click" ,function() {
    var val = $("#myselect").val();
    if (val === "0") {
        alertify.alert("You need to atleast select one plan !");                        
    }
});

Рабочий пример jsfiddle...

Answer 2

Попробуйте проверить значение выбора только при нажатии кнопки:

$(".button-hide").on(" click " ,function(){
    if($('#myselect').val()==0)
        alertify.alert("You need to atleast select one plan !");                        
});

Рабочая демонстрация

Answer 3

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

Сначала свяжите логику события "click" и проверьте текущее значение списка:

$(".button-hide").on("click" ,function(){
    if ($('#myselect').val() == '0') {
        alertify.alert("You need to atleast select one plan !");
    }                        
});

Answer 4

 simply try the code as written below:

    $(".button-hide"). on ("click" ,function(){
         if($('#myselect').val()=="0")
        alertify.alert("You need to atleast select one plan!");  
    });

Answer 5

$('#myselect').change(function (e) {
        var val = $(this).val();

        if (val =='0'){

            $(".button-hide"). on (" click " ,function(){
            alertify.alert("You need to atleast select one plan !");    
                e.preventDefault();
            });
        }});