Knockoutjs 实现省市联动
2015-08-25 00:22
549 查看
Knockoutjs 实现省市联动
html code<!doctype> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.css"> <link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap-theme.css"> <script src="bower_components/jquery/dist/jquery.js"></script> <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script> <script src="bower_components/knockoutjs/dist/knockout.debug.js"></script> </head> <body> <div class="container"> <div class="row"> <div class="col-md-3" id="country"> <select class="form-control" data-bind="options: countryArray, optionsText: 'countryName', optionsValue: 'countryId', value: countryValue, optionsCaption: 'please select', event:{'change': getCity}"></select> </div> <div class="col-md-2" id="village"> <select class="form-control" data-bind="visible: countryValue, options: cityArray, optionsText: 'cityName', optionsCaption: 'Please select', optionsValue: 'cityId', value: 'cityValue'"></select> </div> </div> </div> </body> <script> var countryModel = function(){ var that = this; that.countryArray = ko.observableArray(); that.countryValue = ko.observable(); $.getJSON('http://localhost/demo.php', function(response) {//动态获取国家 that.countryArray(response); }) that.getCity = function() { var id = that.countryValue(); $.getJSON('http://localhost/demo.php', {id: id}, function(response){//动态获取城市 that.cityArray(response); }) } that.cityArray = ko.observableArray(); } ko.applyBindings(new countryModel()); </script> </html>
javascript code
<?php $country = array( array( 'countryName' => 'china', 'countryId' => 1, ), array( 'countryName' => 'japan', 'countryId' => 2, ), array( 'countryName' => 'korean', 'countryId' => 3, ), ); if(isset($_GET['id']) && $_GET['id'] == '1') { $city = array( array( 'cityName' => 'beijing', 'cityId' => 1, ), array( 'cityName' => 'shanghai', 'cityId' => 2, ), ); echo json_encode($city); } else if(isset($_GET['id']) && $_GET['id'] == 2) { $city = array( array( 'cityName' => 'dongjing', 'cityId' => 1, ), array( 'cityName' => 'daban', 'cityId' => 2, ), ); echo json_encode($city); } else if(isset($_GET['id']) && $_GET['id'] == 3) { $city = array( array( 'cityName' => '首尔', 'cityId' => 1, ), array( 'cityName' => 'ahha', 'cityId' => 2, ), ); echo json_encode($city); } else { echo json_encode($country); }
相关文章推荐
- JavaScript设置自适应居中
- js文本框走动跑马灯效果代码分享
- JavaScript+CSS实现仿天猫侧边网页菜单效果
- iframe中子父类窗口调用JS的方法及注意事项
- JavaScript实现向右伸出的多级网页菜单效果
- js焦点文字滚动效果代码分享
- js实现三张图(文)片一起切换的banner焦点图
- js中javascript:void(0) 真正含义
- JavaScript基本数据类型及值类型和引用类型
- jsp+servlet分页之jsp页面
- jsp+servlet分页之servlet
- Ext3动态修改EditorGridPanel的列模型renderer(js函数动态创建)
- JSch实现文件上传到SFTP
- JS操作cookie保存当前时间为cookie值
- validform.js使用方法
- javaScript实现动态取得不同的验证码
- JavaScript基础
- nide.js(二)文件I/O
- nade.js(一)进程管理
- Sublime Text:格式化插件HTML-CSS-JS Prettify