<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="wyf">
<script src="jquery-2.1.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//定义一个控制器，负责将用户操作映射到模型上。
var dataController = {
start : function(){
this.view.start();
},
set : function(name){
this.model.setName(name);
}
};
//定义一个数据模型(负责数据的存储及查询)
dataController.model = {
nameModel : {
"wyf" : "Java",
"zz" : "CSharp",
"zq" : "Javascript"
},
name : null,
//数据模型负责业务逻辑和数据存储
setName : function(name){
this.name = this.nameModel[name] ? name : null;
this.onChange();
},
//通知数据同步更新
onChange : function(){
dataController.view.update();
},
//相应视图对当前状态的查询
getResult : function(){
return this.name ? this.nameModel[this.name] + this.name : "错误";
}
};
//定义视图(视图专门管理页面上发生的事件等)
dataController.view = {
//用户触发change事件
start : function(){
//原生添加事件
//var selectNode = document.getElementById("selectName");
//selectNode.addEventListener("change", this.onChange, false);
//jquery添加事件
$("#selectName").change(this.onChange);
},
onChange : function(){
//原生Javascript获取select选中项值
//var selectNode = document.getElementById("selectName");
//var index = selectNode.selectedIndex;// selectedIndex代表的是你所选中项的index
//dataController.set(selectNode.options[index].value);
//Jquery获取select选中项的值
dataController.set($("#selectName").val());
},
update : function(){
$('#divResult').html(dataController.model.getResult());
}
};
dataController.start();
});
</script>
</head>
<body>
<select id="selectName">
<option value="wyf">哈哈哈</option>
<option value="zz">嘻嘻嘻</option>
<option value="zq">嘿嘿嘿</option>
</select>
<div id="divResult"></div>
</body>
</html>
