if-else条件无法在Javascript中正确执行

Question

I hope the question is not too silly, but I am stuck with it and have tried may things. I have a dropdown in a table row which I am adding dynamically, and I am associating a change event with the dropdown. I have the following code here:

$(document).on("change", $('tr').find('select'), function(){

    if ($(this).val() == 0){
        $('#items_selected').text(1);
        alert("2nd time wrong");
    }else{
        alert("2nd time right");
        $('#items_selected').text(parseInt($('#items_selected').text()) + parseInt($(this).val()));
    }
});

Now, there is a checkbox, which when checked causes the dropdown (previously disabled) to become enabled.This fires the change event properly, executing the if condition in the code above. But when I change the value in the dropdown from the default value of 0 to something else, the event does fire, but again the if condition executes, not the else, which should now work. Is there something wrong with my event type ( change ), or are my datatypes (string/number) messed up, or is it something else? I tried parseInt() and other things but they didn't work. Can someone help please?

Answer 1

You should check the select text value like $(this).find("option:selected").val()

Below code works:

$(document).on("change", $('tr').find('select'), function(){    
    if ($(this).find("option:selected").val() == 0){   
        alert($(this).find("option:selected").val());
    }else{
        alert($(this).find("option:selected").val());         
    }
});

Working FIDDLE

Answer 2

In the present code you call on on $(document) . As a result, in the event handler, this will be the document (even if you are actually looking at events happening on the dropdown).

You can try something like this:

 $("#the-select").on("change", function(){ // good practice: always use "===" if ($(this).val() === "0"){ $('#items_selected').text(1); alert("2nd time wrong"); }else{ alert("2nd time right"); $('#items_selected').text(parseInt($('#items_selected').text()) + parseInt($(this).val())); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="the-select"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> </select> <div id="items_selected">0</div> 

If you absolutely want to call on on $(document) (though I can't see why you would), then keep in mind that this won't be your dropdown. Put it in a variable in the upper scope, re-select it in the handler, or bind your handler to the dropdown.