Javascript event for DropDownList value selected?

Question

I have a DropDownList which has two options yes and no. I am using onchange event right now but it does not get fired the first time page is loaded with value yes in the dropdownlist.(since values has not been changed yet.) I want to set the visibility of controls depending on the current value of the dropdownlist.

ASPX

<asp:DropDownList ID="ddlAriba" onchange="ddlAribaChange(this);" runat="server"              ClientIDMode="Static" CssClass="FormText" AutoPostBack="True">
    <asp:ListItem Value="Y" Selected='True'>Yes</asp:ListItem>
    <asp:ListItem Value="N">No</asp:ListItem>
</asp:DropDownList>

JAVACRIPT

function ddlAribaChange(ddl) {
    var txtAribaDocumentNumber = document.getElementById("txtAribaDocumentNumber");
    var ddlAribaReason = document.getElementById("ddlAribaReason");
    //alert(ddl.options[ddl.selectedIndex].text);
    if (ddl.options[ddl.selectedIndex].text == 'Yes') {
        txtAribaDocumentNumber.style.display = 'inherit';
        ddlAribaReason.style.display = 'none';
    } else {
        txtAribaDocumentNumber.style.display = 'none';
        ddlAribaReason.style.display = 'inherit';
    }
}

http://stackoverflow.com/questions/11179406/jquery-get-value-of-select-onchange — setec, Apr 23 '14 at 11:17

Ehsan Sajjad · Answer 1 · 2014-05-29T06:13:18.223

0

in jquery you can achieve like this:

$(document).ready(function(){

    $('#ddlAriba').change(function(){

    alert($(this).val());

    });

});

or:

$(document).ready(function(){

    $('#ddlAriba').on('change',function(){

        alert($(this).val());

        });

});

if its not firing this way, use delegated event like this:

$(document).ready(function(){

    $(document).on('change','#ddlAriba',function(){

        alert($(this).val());

        });

});

edited May 29 '14 at 06:13

answered Apr 23 '14 at 11:18

Ehsan Sajjad

61,834
16
105
160

I dont not want to do it onchange. Because this event does not get fired when the page first loads. – SamuraiJack Apr 23 '14 at 11:19
But how will it get fired without someone changing the selected value? By default the sected value of dropdown is the first value "Yes" – SamuraiJack Apr 23 '14 at 11:27
when you will change selected index it will fire you want to get first value as well which is default selected? – Ehsan Sajjad Apr 23 '14 at 11:30

score 0 · Answer 2 · answered Apr 23 '14 at 11:20

0

I think this issue is related to page lifetime. Maybe it will be better to display/hide your [select] using code-behind instead of javascript.

answered Apr 23 '14 at 11:20

Shadmehr Vadoodi

731
7
9

score 0 · Answer 3 · answered Apr 23 '14 at 11:29

You need to call the function when the DOM is ready

Try this

$(document).ready(function(){
  ddlAribaChange($('#<%=ddlAriba.ClientID%>').val());
});

May be this will help you.

Or you can put the same code in $(document).ready() function as you want that behavior by default when the page is loaded

$(document).ready(function(){
   var txtAribaDocumentNumber = document.getElementById("txtAribaDocumentNumber");
   var ddlAribaReason = document.getElementById("ddlAribaReason");
   var ddl = $('#<%=ddlAriba.ClientID%>');
   //alert(ddl.options[ddl.selectedIndex].text);
   if (ddl.options[ddl.selectedIndex].text == 'Yes') {
    txtAribaDocumentNumber.style.display = 'inherit';
    ddlAribaReason.style.display = 'none';
   }
   else {
    txtAribaDocumentNumber.style.display = 'none';
    ddlAribaReason.style.display = 'inherit';
   }
});

score 0 · Answer 4 · answered Apr 23 '14 at 12:03

You simply need to call ddlAribaChange when DOM is ready and pass the ddlAriba DOM object. As you have ClientIDMode="static" you do not need to access ClientID in javascript to get DOM object.

$(document).ready(function(){
    ddlAribaChange(document.getElementById('ddlAriba'));
});

Javascript event for DropDownList value selected?

4 Answers4