We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Get selected value in Javascript

I have two DropdownList and a Chart and I want to select one of the two DropdownList to refresh the Chart by passing the selected data of the two DropdownList as parameters.

How can I know the selected value?

This is my code:

--- The two DropdownList:

            <ej:DropDownList ID="cboDelegacion" runat="server" Width="350px" WatermarkText="Seleccione una delegación" ShowRoundedCorner="true" ClientSideOnSelect="onChangeFiltroDelegacion"></ej:DropDownList>
            <ej:DropDownList ID="cboMercado" runat="server" Width="350px" WatermarkText="Seleccione un mercado" ShowRoundedCorner="true" ClientSideOnSelect="onChangeFiltroMercado"></ej:DropDownList>

-- The Chart

        <div id="container" style="height: 640px"></div>

        <script type="text/javascript">
                    $(function () {

            var delegacionFiltro = " ";   ---Here I need to get the value of the DropDownList.
            var mercadoFiltro = " ";  ---Here I need to get the value of the DropDownList.

                        var dataManger = new ej.DataManager(
                            url: "WebService.asmx/ListadoChart", adaptor: "UrlAdaptor"

                        var query = ej.Query();
                        var consulta = dataManger.executeQuery(query.addParams("delegacion", delegacionFiltro).addParams("mercado", mercadoFiltro));  --- The query with parameters
                        consulta.done(function (e) {

                                border: { width: 1 }

                            //Initializing Primary X Axis
                                rangePadding: 'Additional',
                                title: { text: "Estado de la obra", font: { fontWeight: "Bold" } }

                            //Initializing Primary Y Axis
                                title: { text: "Nº puntos de suministro" }

                                enableAnimation: true, pieCoefficient: "0.5",
                                tooltip: { visible: true, format: "#point.x# : #point.y# #series.name#" }

                            //Initializing Series   
                                ....  --- The columns

                            load: "loadTheme",
                            theme: "GradientLight",
                            title: { text: 'Estado de los puntos de suministro', font: { fontWeight: "Bold" } },
                            isResponsive: true,
                            size: { height: "640" },
                            legend: { visible: true, position: "Right", border: { width: 2, color: "#FFC342" } },
                            pointRegionClick: "onChartpointclick"


--- The event of the DropDownList

            <script type="text/javascript">

                   function onChangeFiltroDelegacion(sender) {
                   $("#container").ejChart("redraw");  --- To refresh the chart
                function onChangeFiltroMercado(sender) {
                    $("#container").ejChart("redraw");  --- To refresh the chart



3 Replies

PO Prince Oliver Syncfusion Team January 5, 2017 07:14 PM UTC

Hi Juan, 

Thanks for contacting Syncfusion support. 

To get selected value in the Dropdownlist, you can use getSelectedValue method which will return the current value of the dropdownlist. Refer to the following UG link for more information: https://help.syncfusion.com/api/js/ejdropdownlist#methods:getselectedvalue 

Have a look at the following code snippet: 
var delegacionFiltro = $("#<%=cboDelegacion.ClientID%>").data("ejDropDownList").getSelectedValue(); 
var mercadoFiltro = $("#<%=cboMercado.ClientID%>").data("ejDropDownList").getSelectedValue(); 

Let us know if you require any further assistance. 


JU Juan January 10, 2017 11:55 AM UTC


It works perfect!


PO Prince Oliver Syncfusion Team January 11, 2017 12:29 PM UTC

Hi Juan, 
Most welcome. We are glad to help you. 

Live Chat Icon For mobile
Up arrow icon