像国家/州和城市一样下拉

时间:2010-01-21 12:17:59

标签: jquery

我有像国家/州和城市一样的下拉链。 有没有办法等到下降人口继续进行? 有时候它的工作正常。以下是代码片段 国家/地区下降总是填充,但国家/地区下降填充基于国家值和城市填充基于数据库的州值。后记我需要将State和City选项设置为Selected 在该getOption()中填充基于国家/地区状态值的选项。

success: function(json){                    
                    var obj = JSON.parse(json);                                         

                    $("#country").val(obj[0].BUSINESS_COUNTRY); // Always in populated state
                    $("#state").addOption(getOption("#state",obj[0].BUSINESS_COUNTRY),false);// This populates base on country value using getOption method                                         
                    $("#city").addOption(getOption("#city",obj[0].BUSINESS_STATE),false);   //This populates base on State value



                    setTimeout(function() {                 
                        $("#state").val(obj[0].BUSINESS_STATE);
                        $("#city").val(obj[0].BUSINESS_CITY);
                    },400); 
                }

3 个答案:

答案 0 :(得分:3)

如果选择是链接的,则需要在每个选择的更改上运行ajax,然后填充列表中的下一个。为此,请创建一个通用函数,该函数接受选择的类型(城市,州或国家/地区)并设置其下方的选择并将其绑定到change事件。

这样的事情:

<select id="country"></select>
<select id="state"></select>
<select id="city"></select>

$(document).ready(function() {

    populateLists("country");

    $("#country, #city, #state").change(function() {
        populateLists($(this).attr("id"));
    });

    function populateLists(listType) {

        // do your ajax here (should return an array or string with all corresponding values)

        // on success do this:

        var list;

        if(listType == "country") {
            // populate states
            list; = $("#state");
        } else if(listType == "state") {
            // populate cities
            list; = $("#city");
        }

        for(var i = 0; i < returnedArray.length; ++i) {
         list.append("<option value='" + returnedArray[i] + "'>" + returnedArray[i] + "</option>");
        }
    }
});

答案 1 :(得分:0)

这只是一种json格式。你可以将这个json用于国家,州和城市列表。

$scope.countryList=[
{
    "_id" : "56cbdb338d82d44e4ac2c814",
    "name" : "India"
},
{
    "_id" : "56cc6d8a8d82d44e4ac2c81a",
    "name" : "Pakistan"
}];


$scope.stateList=[
{
    "_id" : "56cc592a8d82d44e4ac2c816",
    "name" : "Maharashtra",
    "country" : {
        "_id" : "56cbdb338d82d44e4ac2c814",
        "name" : "India"
    }
},
{
    "_id" : "56cc594f8d82d44e4ac2c817",
    "name" : "Bihar",
    "country" : {
        "_id" : "56cbdb338d82d44e4ac2c814",
        "name" : "India"
    }
},
{
    "_id" : "56cc59688d82d44e4ac2c818",
    "name" : "Andra-Pradesh",
    "country" : {
        "_id" : "56cbdb338d82d44e4ac2c814",
        "name" : "India"
    }
},
{
    "_id" : "56cc59788d82d44e4ac2c819",
    "name" : "Telangana",
    "country" : {
        "_id" : "56cbdb338d82d44e4ac2c814",
        "name" : "India"
    }
},
{
    "_id" : "56cc6dff8d82d44e4ac2c81b",
    "name" : "Peshavar",
    "country" : {
        "_id" : "56cc6d8a8d82d44e4ac2c81a",
        "name" : "Pakistan"
    }
}];



$scope.cityList=[
{
    "_id" : "56cc7000f9b3225d8885e6c6",
    "name" : "Nanded",
    "state" : {
        "_id" : "56cc592a8d82d44e4ac2c816",
        "name" : "Maharashtra"
    }
},
{
    "_id" : "56cc7000f9b3225d8885e6c7",
    "name" : "Pune",
    "state" : {
        "_id" : "56cc592a8d82d44e4ac2c816",
        "name" : "Maharashtra"
    }
},
{
    "_id" : "56cc7000f9b3225d8885e6c8",
    "name" : "Satara",
    "state" : {
        "_id" : "56cc592a8d82d44e4ac2c816",
        "name" : "Maharashtra"
    }
},
{
    "_id" : "56cc71d3f9b3225d8885e6c9",
    "name" : "Patna",
    "state" : {
        "_id" : "56cc594f8d82d44e4ac2c817",
        "name" : "Bihar"
    }
},
{
    "_id" : "56cc7211f9b3225d8885e6ca",
    "name" : "Adilabad",
    "state" : {
        "_id" : "56cc59788d82d44e4ac2c819",
        "name" : "Telangana"
    }
},
{
    "_id" : "56cc7224f9b3225d8885e6cb",
    "name" : "Tirupati",
    "state" : {
        "_id" : "56cc59688d82d44e4ac2c818",
        "name" : "Andra-Pradesh"
    }
},
{
    "_id" : "56cc7224f9b3225d8885e6cc",
    "name" : "PK-City1",
    "state" : {
        "_id" : "56cc6dff8d82d44e4ac2c81b",
        "name" : "Peshavar"
    }
}];

$scope.tehsilList=[
{
    "_id" : "56d80ce2a5094af2ad65e2ac",
    "name" : "Bhainsa",
    "city" : {
        "_id" : "56cc7211f9b3225d8885e6ca",
        "name" : "Adilabad"
    }
},
{
    "_id" : "56d80d7da5094af2ad65e2ad",
    "name" : "Mudhol",
    "city" : {
        "_id" : "56cc7211f9b3225d8885e6ca",
        "name" : "Adilabad"
    }
},
{
    "_id" : "56d80deaa5094af2ad65e2ae",
    "name" : "Tirupati",
    "city" : {
        "_id" : "56cc7224f9b3225d8885e6cb",
        "name" : "Tirupati"
    }
},
{
    "_id" : "56d80ea4a5094af2ad65e2af",
    "name" : "PK-City1-Tehsil1",
    "city" : {
        "_id" : "56cc7224f9b3225d8885e6cc",
        "name" : "PK-City1"
    }
},
{
    "_id" : "56d80f17a5094af2ad65e2b0",
    "name" : "Dhanapur",
    "city" : {
        "_id" : "56cc71d3f9b3225d8885e6c9",
        "name" : "Patna"
    }
},
{
    "_id" : "56d80fe8a5094af2ad65e2b1",
    "name" : "Satara",
    "city" : {
        "_id" : "56cc7000f9b3225d8885e6c8",
        "name" : "Satara"
    }
},
{
    "_id" : "56d81025a5094af2ad65e2b2",
    "name" : "Pune",
    "city" : {
        "_id" : "56cc7000f9b3225d8885e6c7",
        "name" : "Pune"
    }
},
{
    "_id" : "56d8103ba5094af2ad65e2b3",
    "name" : "Baramati",
    "city" : {
        "_id" : "56cc7000f9b3225d8885e6c7",
        "name" : "Pune"
    }
},
{
    "_id" : "56d81091a5094af2ad65e2b4",
    "name" : "Kinwat",
    "city" : {
        "_id" : "56cc7000f9b3225d8885e6c6",
        "name" : "Nanded"
    }
},
{
    "_id" : "56d8109fa5094af2ad65e2b5",
    "name" : "Loha",
    "city" : {
        "_id" : "56cc7000f9b3225d8885e6c6",
        "name" : "Nanded"
    }
},
{
    "_id" : "56d810c1a5094af2ad65e2b6",
    "name" : "Nanded",
    "city" : {
        "_id" : "56cc7000f9b3225d8885e6c6",
        "name" : "Nanded"
    }
}];

这是我用于级联的示例应用程序,以及角度不同的表单控件。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="resources/style/template.css" />
<link rel="stylesheet" type="text/css" href="resources/style/sticky-footer.css">
<script type="text/javascript" src="resources/js/mkcljs.js"></script>
<script src="resources/js/angular.min.js"></script>
<script src="resources/js/angular-ui-router.min.js"></script>
<script src="resources/js/checklist-model.js"></script>
<title>Sample Form</title>
</head>
<body class="site com_content view-form layout-edit task"
    data-target=".navbar" data-spy="scroll" ng-app="userListA" > 
    <div id="wrap">
        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <button type="button" class="btn btn-navbar" data-toggle="collapse"
                        data-target=".nav-collapse">
                        <span class="icon-bar"></span> <span class="icon-bar"></span> <span
                            class="icon-bar"></span>
                    </button>
                    <a class="brand active" href="/"> Sample App </a>
                    <nav class="nav-collapse collapse">
                        <!-- Root menus starts here -->
                        <div id="menu">
                            <ul class="nav">
                                <li><a ui-sref="home">Home Page</a></li> 
                                <li><a ui-sref="masterData">Master Data</a></li> 
                                <li><a ui-sref="addItem">Add Item Data</a></li> 

                            </ul>
                        </div>
                    </nav>
                </div>
            </div>
        </div>
        <div class="body">
            <!-- Container started -->
            <div class="container">
                <div class="header">
                    <div class="header-inner" > <ui-view>

                        <br> <br>
                    </div>
                </div>
                <div class="row-fluid">

                </div>
            </div>
        </div>
        <div id="push"></div>
    </div>
<!--<div id="dob_datepic" class="date">
<input placeholder="DD/MM/YYYY" readonly="readonly">
<span class="add-on" id="icon"><i class="icon-calendar"></i></span>


</div>
<script type="text/javascript">
$(function(){
    $("#dob_datepic").datepicker({
        format:"dd/mm/yyyy",
        autoclose:true,
    });
});


</script>-->
<script type="text/javascript">
var parentModule=angular.module("userListA",["ui.router","checklist-model"]);

parentModule.config(function($stateProvider,$urlRouterProvider){
    //$urlRouterProvider.otherwise("/addItem");
    $stateProvider

    .state('addItem',{
        url:'/addItem',
        templateUrl:'htmlviews/validations.html',
        controller:'validationCtr'
    }).state('masterData',{
        url:'masterData',
        templateUrl:'htmlviews/masterData.html',
        controller:'masterDataCtr'
    }).state('viewData',{
        url:'/viewItemData',
        templateUrl:'htmlviews/ViewData.html',
        controller:'viewDataCtr'
    }).state('masterData.addstate',{
        url:'/addstate',
        templateUrl:'htmlviews/addState.html',
        controller:'addStateCtr'
    });
});
parentModule.controller("validationCtr",function($scope,$http,$window){

    $scope.getDatafromDB=function(){
        $http({
            url:"demouser/getAllDatafromDB",
            method: "GET",          
        }).success(function(data,status){

            $scope.itemLocalList=data;
            $scope.isUpdate=true;
            $scope.isDelete=true;

        }).error(function(data,status){

        });
    };

    $scope.clearLocalStorage=function(){
        $window.localStorage.removeItem("itemList");
        $scope.itemLocalList={};
    };

    if($window.localStorage.getItem('itemList')!=null)
    {
        console.log("in local list");
        $scope.itemLocalList=JSON.parse($window.localStorage.getItem("itemList"));
        $scope.isUpdate=false;
        $scope.isDelete=false;
        console.log($scope.itemLocalList);
    }
    else 
        {
        $scope.getDatafromDB();
        }


    $http({
        url:"demouser/getHobbies",
        method: "GET",

    }).success(function(data,status){
        $scope.hobbies=data;
        console.log($scope.hobbies);
    }).error(function(data,status){
        alert("error");
    });

    $http({
        url:"demouser/getCountries",
        method: "GET",

    }).success(function(data,status){
        $scope.conutries=data;
        console.log($scope.conutries);
    }).error(function(data,status){
        alert("error");
    });
    //$scope.item=JSON.parse($window.localStorage.getItem("item"));
    $http({
        url:"demouser/getCountrywiseState",
        method: "GET",

    }).success(function(data,status){
        $scope.states=data;
        console.log($scope.states);
    }).error(function(data,status){
        alert("error");
    });

    $scope.savetolocal=function(){
        var items=[];
        if($window.localStorage.getItem("itemList")!=null)
            {
            items.push.apply(items,JSON.parse($window.localStorage.getItem("itemList")));
            }
        items.push($scope.item);
        $window.localStorage.setItem("itemList",JSON.stringify(items));
        $scope.item={};
        //$scope.itemLocalList=JSON.parse($window.localStorage.getItem('itemList'));
        //console.log("itemLocalList"+ $scope.itemLocalList);
    };
    $scope.savetoDB=function()
    {
        $http({

            url: "demouser/saveBulkData",
            method: "POST",
            data: JSON.parse($window.localStorage.getItem("itemList"))

        }).success(function(data,status){
            console.log("Data synced to database sucessfully");
            $scope.getDatafromDB();
            $scope.clearLocalStorage();
        }).error(function(data,status){
            console.log("failure");
        })
    };

    $scope.updateRecordinDB=function(item){
        $http({
            url: "demouser/updateRecord",
            method: "POST",
            data: item

        }).success(function(data,status){
            console.log("Data upadted to database sucessfully");
            $scope.item={};
        }).error(function(data,status){
            console.log("failure"); 
        })
    }
    $scope.deleteItem=function(item){
        $http({
            url: "demouser/deleteRecord",
            method: "POST",
            data: item

        }).success(function(data,status){
            console.log("Data deleted to database sucessfully");
            $scope.item={};
        }).error(function(data,status){
            console.log("failure"); 
        })
    }
    $scope.getItem=function(itm){

        $scope.item=itm;
    }

});

parentModule.controller("masterDataCtr",function($scope,$http,$window){

});

parentModule.controller("addStateCtr",function($scope,$http,$window){

    $http({
        url:"demouser/getCountries",
        method: "GET",

    }).success(function(data,status){
        $scope.conutries=data;
        console.log($scope.conutries);
    }).error(function(data,status){
        alert("error");
    });
});


</script>
    <!-- Footer -->
    <div class="footer">
        <div class="container">
            <hr />
            <p class="pull-right">
                <a href="#" id="back-top">Back To Top</a>
            </p>
            <p>&copy;Copyright 2014-15 Maharashtra Knowledge Corporation Ltd.
                All Rights Reserved.</p>
        </div>
    </div>


</body>
</html>
<form class="form-horizontal" name="frm">

                    <div class="control-group">
        <label class="control-label required">Item Name</label>
    <div class="controls">
    <input type="text" ng-model="item.itemName" name="itemName" ng-minlength="3" ng-maxlength="25" required/>
    <span ng-show="(frm.itemName.$error.required || frm.itemName.$error.minlength || frm.itemName.$error.maxlength) && frm.itemName.$dirty">Please fill the item name.</span>
    </div>
    </div>

    <div class="control-group">
        <label class="control-label required">Item Code</label>
    <div class="controls">  
    <input type="number" ng-model="item.itemCode" name="itemCode" ng-min="18" ng-max="100" required/>
    <span ng-show="(frm.itemCode.$error.required || frm.itemCode.$error.min || frm.itemCode.$error.max) && frm.itemCode.$dirty ">Please fill the item code with valid number.</span>
    </div>
    </div>

    <div class="control-group">
    <label class="control-label required">Email</label>
    <div class="controls">  
    <input type="email" ng-model="item.email" name="email" ng-pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/" required/>
    <span ng-show="(frm.email.$error.required || frm.email.$error.pattern) && frm.email.$dirty ">Please enter valid email address.</span>
    </div>
    </div>

    <div class="control-group">
    <label class="control-label required">Gender</label>
    <div class="controls">  
    <input type="radio" ng-model="item.gender" name="gender" value="M" required>Male</input>
    <input type="radio" ng-model="item.gender" name="gender" value="F" required>Female</input>

    <span ng-show="frm.gender.$error.required && frm.gender.$dirty ">Please enter valid email address.</span>
    </div>
    </div>
    <div class="control-group">
    <label class="control-label required">Gender</label>
    <div class="controls">  
    <label ng-repeat="hobby in hobbies">
    <input type="checkbox" checklist-model="item.hobbies" checklist-value="hobby" name="hobby" >{{hobby.name}}</input>  
    </label>

    <div class="control-group">
    <label class="control-label required">Country</label>
    <div class="controls">  
    <select ng-options="country as country.name for country in conutries track by country.name" ng-model="item.conutries" >
    <option value="">Select Country</option>
    </select>   
    </div>  
    </div>

    <div class="control-group">
    <label class="control-label required">State</label>
    <div class="controls">  
    <select ng-disabled="!item.conutries" ng-options="state as state.name for state in states | filter:{$:item.conutries.name} track by state.name" ng-model="item.states" >
    <option value="">Select State</option>
    </select>   
    </div>  
    </div>

    <div class="control-group">
    <label class="control-label required">DOB</label>
    <div class="controls">  
    <div class="date" id="datepicker_dateOfBirth">
    <input ng-model="item.dob" name="dob" placeholder="DD/MM/YY" readonly="true" required>
    <span class="add-on" id="icon"><i class="icon-calendar"></i></span></div>
    </div>  
    </div>

    <br/>
    <div class="controls">
    <button  type="submit" class="btn btn-success" ng-click="savetolocal()">Save to Local</div>
    <button ng-show="isUpdate" type="submit" class="btn btn-success" ng-click="updateRecordinDB(item)">Update</div>
    </form>

    <div ng-if="itemLocalList.length>0">
    Search:<input type="text" ng-model="searchText"/> 
    <table class="table table-bordered table-striped" >
    <thead> 
    <tr>    
    <td>Item Name</td>
    <td>Code</td>
    <td>Cust Email</td>
    <td>Gender </td>
    <td>dob </td>
    <td>Hobbies</td>
    <td>Country</td>
    <td>State</td>
    <td>Update</td>
    <td>Delete</td>
    </tr>
    </thead>
    <tbody> 

    <tr ng-repeat="itm in itemLocalList | orderBy: ['itemName','itemCode'] | filter :{itemName: searchText}" >
    <td>{{itm.itemName}}{{itm._id}} </td>
    <td>{{itm.itemCode}} </td>
    <td>{{itm.email}} </td>
    <td>{{itm.gender}} </td>
    <td>{{itm.dob}} </td>
    <td><label ng-repeat="hby in itm.hobbies">{{hby.name}} </label> </td>
    <td>{{itm.conutries.name}} </td>
    <td>{{itm.states.name}} </td>   
    <td><button ng-show="isUpdate" ng-click="getItem(itm)">Update</button></td>
    <td><button ng-show="isDelete" ng-click="deleteItem(itm)">Delete</button></td>
    </tr> 
    </tbody>
    </table>

<div class="control-group">
<div class="controls">
    <button type="submit" class="btn btn-success" ng-click="savetoDB()">Sync Data to DB</div>
</div>
    </div>              

                </div>
            </div>
        </div>
        <div id="push"></div>
    </div>
<!--<div id="dob_datepic" class="date">
<input placeholder="DD/MM/YYYY" readonly="readonly">
<span class="add-on" id="icon"><i class="icon-calendar"></i></span>


</div>-->
<script type="text/javascript">
$(function(){
    $("#datepicker_dateOfBirth").datepicker({
        format:"dd/mm/yyyy",
        autoclose:true,
    });
});


</script>
package mkcl.os.apps.controllers;

import java.text.SimpleDateFormat;
import java.util.Date;

import mkcl.os.apps.services.NoSQLCrudService;

import org.springframework.beans.propertyeditors.CustomDateEditor;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.WebDataBinder;
import org.springframework.web.bind.annotation.InitBinder;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
@RequestMapping("demouser")
public class UserController {

    @InitBinder
    public void initBinder(WebDataBinder binder) {
        SimpleDateFormat dateFormat = new SimpleDateFormat("dd/MM/yyyy");
        dateFormat.setLenient(false);
        binder.registerCustomEditor(Date.class, new CustomDateEditor(dateFormat, true));
    }



    @ResponseBody
    @RequestMapping(value = "saveUserAJAX", method = RequestMethod.POST)
    public void saveCandidate(@RequestBody String user) {
        NoSQLCrudService modelLessCrudService=new NoSQLCrudService();
        modelLessCrudService.saveCollection("user", user);
    }


    @ResponseBody
    @RequestMapping(value = "getUserAJAX", method = RequestMethod.GET)
    public String getUserAJAX(@RequestParam String id) {
        NoSQLCrudService modelLessCrudService=new NoSQLCrudService();
        String user=modelLessCrudService.findOne("user", id);
        return user;
    }

    @ResponseBody
    @RequestMapping(value = "getHobbies", method = RequestMethod.GET)
    public String getHobbies() {
        NoSQLCrudService modelLessCrudService=new NoSQLCrudService();
        String hobbs=modelLessCrudService.getAllRecords("hobbies");
        return hobbs;
    }

    @ResponseBody
    @RequestMapping(value = "getCountries", method = RequestMethod.GET)
    public String getCountries() {
        NoSQLCrudService modelLessCrudService=new NoSQLCrudService();
        String cntryList=modelLessCrudService.getAllRecords("country");
        return cntryList;
    }

    @ResponseBody
    @RequestMapping(value = "getCountrywiseState", method = RequestMethod.GET)
    public String getCountrywiseState() {
        NoSQLCrudService modelLessCrudService=new NoSQLCrudService();
        String stateList=modelLessCrudService.getAllRecords("state");
        return stateList;
    }

    @ResponseBody
    @RequestMapping(value = "saveBulkData", method = RequestMethod.POST)
    public void saveBulkData(@RequestBody String itemList) {
        NoSQLCrudService modelLessCrudService=new NoSQLCrudService();
        modelLessCrudService.saveCollection("itemList", itemList);      
    }

    @ResponseBody
    @RequestMapping(value = "updateRecord", method = RequestMethod.POST)
    public void updateRecord(@RequestBody String item) {
        NoSQLCrudService modelLessCrudService=new NoSQLCrudService();
        modelLessCrudService.save("itemList", item);        
    }
    @ResponseBody
    @RequestMapping(value = "deleteRecord", method = RequestMethod.POST)
    public void deleteRecord(@RequestBody String item) {
        NoSQLCrudService modelLessCrudService=new NoSQLCrudService();
        modelLessCrudService.delete("itemList", item);      
    }

    @ResponseBody
    @RequestMapping(value = "getAllDatafromDB", method = RequestMethod.GET,produces="application/json;charset=utf-8;")
    public String getAllDatafromDB() {
        NoSQLCrudService modelLessCrudService=new NoSQLCrudService();
        String itemList=modelLessCrudService.getAllRecords("itemList"); 
        return itemList;
    }

}

答案 2 :(得分:0)

&#13;
&#13;
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="employee.aspx.cs" Inherits="ClassTest.employee" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function Savedata() {
            Country_Get();
           
        });
        function Savedata()
        {
            $.ajax({
                url: 'employee.aspx/insert',
                type:'post',
                contentType: 'application/json;charset=utf-8',
                datatype: 'Json',
                data: "{A:'" + $("#textname").val() + "',B:'" + $("#textage").val() + "',C:'" + $("#ddlcountry").val() + "',D:'" + $("#ddldept").val() + "'}",
                success: function(){
                alert('insert success !!')
                },
                error: function () {
                    alert('data error !!')
                },

            });
        }

        function Country_Get() {
            $.ajax({
                url: 'employee.aspx/Country_Get',
                type: 'post',
                contentType: 'application/json;charset=utf-8',
                datatype: 'Json',
                data: "{}",
                success: function (_dt) {
                    _dt = JSON.parse(_dt.d);
                    for (var i = 0; i < _dt.length; i++) {
                        $("#ddlcountry").append($('<option/>').attr("value", _dt[i].Cid).text(_dt[i].Cname));
                    }
                },
                error: function () {
                    alert('data error !!')
                },

            });
        }

    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
    <table>
        <tr>
            <td>Name:</td>
            <td><input type="text" id="Textname" /></td>
        </tr>

         <tr>
            <td>Age:</td>
            <td><input type="text" id="Textage" /></td>
        </tr>

        <tr>
            <td>Country:</td>
            <td><select id="ddlcountry">
                <option value="0">-----select-----</option>
                </select></td>
        </tr>

        <tr>
            <td></td>
            <td><input type="button" id="btnsave" value="Save" onclick="Savedata()" /></td>
        </tr>
    </table>
    </div>
    </form>
</body>
</html>
&#13;
&#13;
&#13;