Sharepoint 2013 list Dropdown change event is not working using Jquery in NewForm.aspx

Question

I have 10 Dropdowns in SharePoint list. Initially I want to show only one Drop down in the newform.aspx. Once the user selects a value in the dropdown i want to show another dropdown.

I was able to get the first part successfully i.e( Hiding the other dropdowns).But on change event of the dropdown is not working fine. Can you please let me know if my code is correct.

<script src="http://Style%20Library/jquery-1.9.1.js" type="text/javascript"></script> 
<script type="text/javascript" >

$(document).ready(function(){
CheckDropdown("Drop1","Drop2");
CheckDropdown("Drop2","Drop3");
});   

function CheckDropdown(Drop_Column,Hide_Column)
{
var DropDownColum=$("select[title='"+Drop_Column+"']");

if ($("select[title='"+Drop_Column+"']option:selected").text() == "")
{
HideColumn(Hide_Column,"True");
} 
else
{
HideColumn(Hide_Column,"False");
} 

DropDownColum .change(function() {    
if ($("select[title='"+Drop_Column+"']option:selected").text() == "")
{
HideColumn(Hide_Column,"True");
} 
else
{
HideColumn(Hide_Column,"False");
}
});
}
function HideColumn(Column,IsHide)
{    
     if(IsHide=="True")
     {  
        $('nobr:contains("'+Column+'")').closest('tr').hide();
     }
     else
     { 
        $('nobr:contains("'+Column+'")').closest('tr').show();
     }
}
</script>

Answer 1

You can change your logic as below

$(document).ready(function(){
    $("select[title^='Drop'").change(function(){
        var title = $(this).attr("title");
        var selected = $(this).find("option:selected").text();
        if(title == "Drop1" && selected == "") {
            $(select[title='Drop2']).hide();
        }
        else{
            $(select[title='Drop2']).show();
        }

        //.. Do the same for other drop downs
    });
});

The above code is not tested. You should try it and modify, first make sure the change event is firing, for that you can add alert statements to debug.

Answer 2

Thanks Amal your code just made me to go in the right direction. Actually i have passed empty values to my sharepoint dropdown values . So on change of the dropdown event i am getting "Undefined" . I used the below Code to achieve my scenario. I have another issue which i will post it in a new one.

DropDownColum.change(function() {
var value = $(this).val();// Value of selected option
        var Text = $(this).val();// Text of selected option
       // alert('Value: '+value);
       // alert('Text:' +Text);
if (Text == "")
{
HideColumn(Hide_Column,"True");
} 
else
{
HideColumn(Hide_Column,"False");
}
});