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