Événement Javascript pour la valeur DropDownList sélectionnée?

Question

J'ai un DropDownList qui a deux options oui et non. J'utilise l'événement onchange maintenant mais il ne se déclenche pas la première fois que la page est chargée avec la valeur oui dans la liste déroulante (puisque les valeurs n'ont pas encore été changées). Je veux définir la visibilité des contrôles en fonction de la valeur actuelle la liste déroulante.

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'; 
    } 
} 

Answer 1

en jquery vous pouvez obtenir comme ceci:

$(document).ready(function(){ 

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

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

    }); 

}); 

ou:

$(document).ready(function(){ 

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

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

     }); 

}); 

si son tir pas de cette façon, utiliser l'événement comme celui-ci délégué:

$(document).ready(function(){ 

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

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

     }); 

}); 

Answer 2

Je pense que ce problème est lié à la vie de la page. Peut-être vaudra-t-il mieux afficher/masquer votre [select] en utilisant code-behind au lieu de javascript.

Answer 3

Vous devez appeler la fonction lorsque le DOM est prêt

Essayez cette

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

Peut-être cela vous aidera.

Ou vous pouvez mettre le même code dans $(document).ready() fonction que vous voulez que le comportement par défaut lorsque la page est chargée

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

Answer 4

Il vous suffit d'appeler ddlAribaChange quand DOM est prêt et passer le ddlAriba DOM objet. Comme vous avez ClientIDMode="static" vous n'avez pas besoin d'accéder à ClientID en javascript pour obtenir l'objet DOM.

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