自定义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>