This is a migrated thread and some comments may be shown as answers.

dropdown data not binding on change event

0 Answers 192 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Tirumalesh
Top achievements
Rank 1
Tirumalesh asked on 24 Apr 2012, 01:52 PM
<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?   

No answers yet. Maybe you can help?

Tags
DropDownList
Asked by
Tirumalesh
Top achievements
Rank 1
Share this question
or