Saturday, May 23, 2015

Json Data Using Javascript loop

Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList runat="server" ID="city" onchange="loadSTDCode(this.value);">
<asp:ListItem Text="Select City" Value="" />
<asp:ListItem Text="Warangal" Value="0" />
<asp:ListItem Text="hyderabad" Value="1" />
<asp:ListItem Text="Delhi" Value="2" />
</asp:DropDownList>

<asp:DropDownList ID="stdcode" runat="server">
</asp:DropDownList>
</div>
<script type="text/javascript">
function loadSTDCode(cityid) {
var list = document.getElementById('<%=stdcode.ClientID %>');
var optlength = list.options.length;
for (var i = 0; i < optlength; i++) {
    list.remove(0);

}
var city = 'c' + cityid;

var arr = [{ "c1": "562,343,534", "c2": "79,123,124,967", "c3": "532", "c4": "183", "c5": "240", "c6": "80", "c0": "1521,1522,1520,151,1523"}];
for (var i = 0; i < arr.length; i++) {
    var obj = arr[i];
    for (var key in obj) {
        var attrName = key;

        var attrValue = obj[key];
        if (attrName == city) {

            var posi = attrValue.indexOf(",");
            if (posi == -1) {
                var opt = document.createElement("option");
                document.getElementById('<%=stdcode.ClientID %>').options.add(opt);
                opt.text = attrValue;
                opt.value = attrValue;
            }
            else {
                var mySplitResult = attrValue.split(",");
                for (var i = 0; i < mySplitResult.length; i++) {
                    var opt = document.createElement("option");
                    document.getElementById('<%=stdcode.ClientID %>').options.add(opt);
                    opt.text = mySplitResult[i];
                    opt.value = mySplitResult[i];
                }
            }
        }
    }
}
}
</script>
</form>
</body>
</html>