Konckout第二个实例：数组数据类型双向绑定 -- 下拉select
2024-09-14 03:32:30
自定义js做法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#content1{padding: 20px;}
</style>
</head>
<body>
<div id="content1">
<select id="userNameList">
</select>
<b id="selectValue"></b>
</div> <script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/knockout30.js"></script>
<script>
function RenderSelectOptions(datas,selectNode){
var optionString = "";
for(var i in datas){
optionString += "<option value="+datas[i]+">"+datas[i]+"</option>";
}
selectNode.html(optionString);
}
$(function(){
var userName = ['党---','兴---','明---'];
var userNameList = $('#userNameList'); RenderSelectOptions(userName,userNameList); $('#userNameList').change(function(){
var selectValue = $('#selectValue');
selectValue.html(userNameList.val());
});
});
</script>
</body>
</html>
knockout方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#content1{padding: 20px;}
</style>
</head>
<body>
<div id="content1">
<select id="userNameList" data-bind="options:userNames,selectedOptions:selectedUserName">
</select>
<b id="selectValue" data-bind="html:selectedUserName"></b>
</div> <script src="js/jquery.js"></script>
<script src="js/knockout30.js"></script>
<script>
$(function(){
var ViewModel = function(){
var self = this;
self.userNames = ko.observable(['aaa','bbb','ccc']);
self.selectedUserName = ko.observable("");
}
var currentViewModel = new ViewModel();
ko.applyBindings(currentViewModel);
});
</script>
</body>
</html>
但：这样option上value和显示的文本都是数组里的值，当需要两个不一样时，该肿么办呢：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#content1{padding: 20px;}
</style>
</head>
<body>
<div id="content1">
<select id="userNameList" data-bind="options:userNames,optionsText:'Key',optionsValue:'Value',selectedOptions:selectedUserName">
</select>
<b id="selectValue" data-bind="html:selectedUserName"></b>
</div> <script src="js/jquery.js"></script>
<script src="js/knockout30.js"></script>
<script>
$(function(){
var ViewModel = function(){
var self = this;
//self.userNames = ko.observable(['aaa','bbb','ccc']);
self.userNames = ko.observable([{Key:'tom',Value:'1'},{Key:'jerry',Value:'2'},{Key:'dang',Value:'3'}]);
self.selectedUserName = ko.observable();
}
var currentViewModel = new ViewModel();
ko.applyBindings(currentViewModel);
});
</script>
</body>
</html>
最新文章
- 移动端web自适应解决方案： adaptive.js
- arpg网页游戏之地图（四）
- 利用iframe无刷新上传文件的坑
- 蓝牙(2)用BluetoothAdapter搜索蓝牙设备示例
- pomelo流程
- python基础知识六
- ListView之ArrayAdapter
- Android入门——UI(2)
- OutputDebugString 输出信息到调试器
- java.io.IOException: Stream closed
- Spring MVC Restful Put方法无法获取参数值
- 米卡 Mica Logo 存放处
- step_by_step_ABP规约模式
- JavaScript中date日期的n种方法
- BBS-项目流程分析-表的创建
- tail 命令(转)
- 【Udacity】解决：字幕遮挡视频内容怎么办？Udacity字幕大小调整
- Memcache的客户端连接系列（四） PHP
- poi设置背景色
- c语言实践打印字母三角形