自定义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>
时间： 2024-07-29 05:50:50