javascript - 下拉选择条件警报

Question

当下拉列表中的值为“0”并且用户尝试单击“添加另一个计划”按钮时，我正在尝试使用 alertify 库弹出警报。由于某种原因，警报没有出现。

alertify 库的 JS 工作正常，正如我在其他场景中测试过的那样，它确实弹出了，但由于某种原因在这种情况下它不起作用。

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(){
    if($('#myselect').val()==0)
        alertify.alert("You need to atleast select one plan !");                        
});

工作演示

Answer 2

目前，您的绑定和检查顺序错误（目前，每次用户选择选项时，您都会将“单击”事件绑定到按钮。因此，在用户第一次选择选项之前，不会绑定任何单击逻辑）。

首先绑定“点击”事件逻辑并检查其中的当前列表值：

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

Answer 3

如果选择更改为第一个选项，您的脚本将向按钮添加事件处理程序。无论如何，您都应该添加按钮事件处理程序，并改为检查下拉值...

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

工作jsfiddle示例...

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();
            });
        }});