dropdown data not binding on change event

1 posts, 0 answers
  1. Tirumalesh
    Tirumalesh avatar
    23 posts
    Member since:
    Aug 2011

    Posted 24 Apr 2012 Link to this post

    <ul>
                        <li>Competitor:
                            <%-- <input id="titles" />--%>
                            <select id="CompProducts" class="km-text">
                            </select></li>
                        <li runat="server">Series:
                            <select id="iLevel" class="km-text">
                            </select>
                        </li>
                        <li runat="server">
                            <label for="depth">
                                Depth:</label>
                            <select id="depth">
                            </select>
                        </li>
                    </ul>
     <script type="text/javascript">
            var Container = '';
            var returnVal = '';
            var myArray2 = new Array();
            var myArray = new Array();
            var myArray3 = new Array();

            function GetAllUserInfo() {
                var Surl = "LPService.asmx/ListCompetitorProducts";
                $.ajax({
                    url: Surl,
                    type: 'POST',           
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (result) {
                        returnVal = result.d;
                        Container = [{ text: "--Select--"}];
                        myArray.push(Container[0]);

                        for (i = 0; i <= returnVal.length - 1; ) {
                            Container = [{ text: "" + returnVal[i], value: "" + returnVal[i]}];
                            myArray.push(Container[0]);
                            i = i + 1;
                        }
                        Init();
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        returnVal = '';
                        alert(textStatus);
                    }
                });
            }
       
            function Init() {
                
               $("#CompProducts").kendoDropDownList({
                    dataTextField: "text",
                    dataValueField: "value",
                    dataSource: myArray,
                    change: onManfacturerChange
                });
            };
            var val = '';
            var id = '';

            function onManfacturerChange() {
                var va = this.value();           
                myArray2 = [];
                val = $("#CompProducts").val();           
                var dataString = "{'Manufacturer':'" + val + "'}";         
                var Surl = "LPService.asmx/ListCompetitorSeries";
                $.ajax({
                    url: Surl,
                    type: 'POST',
                    data: dataString,
                   contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (result) {
                        returnVal = result.d;
                        var arr = returnVal;                 
                        Container = [{ text: "--Select--"}];
                       myArray2.push(Container[0]);
                        for (i = 0; i <= arr.length - 1; i++) {
                            var Cont = [{ text: "" + arr[i], value: " " + arr[i]}];
                            myArray2.push(Cont[0]);                      
                        }
                        CompSeries();                 
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        returnVal = '';
                        alert(textStatus);
                    }
                });
       }
      
            function CompSeries() {  
                 
               $("#iLevel").kendoDropDownList({
                        dataTextField: "text",
                        dataValueField: "value",
                        dataSource: myArray2,
                        change: onChangeCompSeries
                    });
            };     

            var val = '';
            var id = '';
            function onChangeCompSeries() {           
                myArray2 = [];
                val = $("#iLevel").val();
                var dataString = "{'SeriesType':'" + val + "'}";      
                var Surl = "LPService.asmx/ListDepth";
                $.ajax({
                    url: Surl,
                    type: 'POST',
                    data: dataString,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (result) {
                        returnVal = result.d;
                        var arr = returnVal;               
                       Container = [{ text: "--Select--"}];
                        myArray2.push(Container[0]);
                        for (i = 0; i <= arr.length - 1; i++) {
                            var Cont = [{ text: "" + arr[i], value: " " + arr[i]}];
                            myArray2.push(Cont[0]);                     
                        }
                        Depth();
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        returnVal = '';
                        alert(textStatus);
                    }
                });
            }
       
            function Depth() {         
                $("#depth").kendoDropDownList({ 
                    dataTextField: "text",
                    dataValueField: "value",
                    dataSource: myArray2,
                    change: onChangedepth
                });
            };
            var val1 = '';
            var id1 = '';
            function onChangedepth() {
                myArray3 = [];
                val1 = $("#depth").val() + '"';        
                var dataString = "{'DepthType':'" + val1 + "'}";      
                var Surl = "LPService.asmx/Depth";
                $.ajax({
                    url: Surl,
                    type: 'POST',
                    data: dataString,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (result) {
                        returnVal = result.d;
                        var arr = returnVal;                
                        Container = [{ text: "--Select--"}];
                        myArray3.push(Container[0]);
                        for (i = 0; i <= arr.length - 1; i++) {
                            var Cont = [{ text: "" + arr[i], value: " " + arr[i]}];
                            myArray3.push(Cont[0]);                  
                        }
                        LpSeries();
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        returnVal = '';
                        alert(textStatus);
                    }
                });
            }  
            function LpSeries() {         
                $("#dropdown").kendoDropDownList({
                    dataTextField: "text",
                    dataValueField: "value",
                    dataSource: myArray3
                });
            };
        </script>


    Every time when i select first dropdown, the second dropdown will bound upon the selected value in 1st dropdown.It was okey when i select 1st time but if i changed the 1st dropdown value again then the 2nd one will disappear.How to resolve this?   
Back to Top