代码之家  ›  专栏  ›  技术社区  ›  Vicky

像国家/州和城市这样的下拉列表

  •  0
  • Vicky  · 技术社区  · 15 年前

    我有一系列的下拉列表,比如国家/州和城市。 有没有办法等到人口下降后再继续下去? 有时它能正常工作。以下是代码截图 其中,国家下拉框始终填充,但国家下拉框基于国家值填充,城市基于数据库中的国家值填充。后记我需要将状态和城市选项设置为选中 在该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 回复  |  直到 6 年前
        1
  •  3
  •   Ariel    15 年前

    如果选择被链接,您将需要对每个选择的更改运行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>");
            }
        }
    });
    
        2
  •  0
  •   Avyaan    8 年前

    这只是一个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;
        }
    
    }
    
        3
  •  0
  •   Mohit Sharma    7 年前

    <%@ 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>