Get selected value in Javascript

[Juan]

Hello,
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"
                        });

                        $("#container").ejWaitingPopup()
                        $("#container").ejWaitingPopup("show");
                        var query = ej.Query();
                        var consulta = dataManger.executeQuery(query.addParams("delegacion", delegacionFiltro).addParams("mercado", mercadoFiltro));  --- The query with parameters
                        consulta.done(function (e) {
                            $("#container").ejWaitingPopup("hide");
                        });



                        $("#container").ejChart(
                        {
                           
                            chartArea:
                            {
                                border: { width: 1 }
                            },

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

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

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

                            //Initializing Series   
                            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"
                        });

                    });
                </script>

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

        </script>


Thanks.

[Prince Oliver]

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. 

Regards, 

Prince 

[Juan]

Thanks!

It works perfect!

Regards.

[Prince Oliver]

Hi Juan, 

  

Most welcome. We are glad to help you. 

  

Regards, 

Prince