页面代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="applicable-device" content="pc,mobile">
<meta http-equiv="Cache-Control" content="no-transform ">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<title>后台管理</title>
<link rel="stylesheet" type="text/css" href="../../static/layui/css/layui.css">
<script src="../../static/back/js/jquery.js"></script>
<script src="../../static/back/js/bootstrap.js"></script>
</head>
<body >
<!--头部-->
<div id="head" style="width:100%;"></div>
<!--左侧树-->
<div id="leftNave" style="width:200px!important">
</div>
<script type="text/javascript">
//引用头部的方法
$("#head").load("../navigation/head.html");
//引用左侧树的方法
$("#leftNave").load("../left/left.html");
</script>
<!-- 新增检查6s表 -->
<div id="index" class="content" style="display: block;text-align: center">
<!-- 添加 -->
<div class="inform" id="informAdd">
<h1 class="renyuanyidong">添加积分记录</h1>
<div style="margin-left: 20px;">
<!--表单class必须为layui-form-->
<form class="layui-form" action="">
<div class="form-group">
<label>人 员:</label>
<div class="layui-input-inline">
<select id="renyuanList" name="modules" lay-verify="required" lay-search="">
<option value="">请选择人员</option>
</select>
</div>
</div>
<div class="form-group">
<label>时 间:</label>
<input type="text" name="startTime" class="span2" readonly id="dpd1" placeholder="请选择时间">
</div>
<div class="form-group">
<label>词条分类:</label>
<!--以下结构除了id其它都不能修改 lay-filter用于捕获时间-->
<div class="layui-input-inline">
<select id="ItemType" lay-filter="selectItem" name="modules" lay-verify="required" lay-search="">
<option value="">请选择词条分类</option>
</select>
</div>
</div>
<div class="form-group">
<label>请选择项目:</label>
<div class="layui-input-inline">
<select id="ItemInfo" lay-filter="selectIntegralItemScore" name="modules" lay-verify="required" lay-search="">
<option value="" score="0">请选择词条项目</option>
</select>
</div>
</div>
<div class="form-group">
<label>积 分:</label>
<input type="text" id="ItemIntegral" readonly value="0">
</div>
<div style="text-align:center;margin-top:10px;margin-bottom: 10px;">
<button type="button" onclick="addIntegralRecord()" class="btn btn-primary">添加</button>
<button type="reset" class="btn btn-warning" onclick="hideIntegralRecord()">取消</button>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
$("#renyuanList").html("");
$("#ItemType").html("");
$.ajax({
url:url+"/renyuan/listAll",
async:false,
type:"POST",
success:function(data){
for(var i=0;i<data.length;i++){
$("#renyuanList").append("<option value='"+data[i].ID+"'>"+data[i].xingming+"</option>")
}
},
error:function(){
console.log("出错！");
}
});
$.ajax({
url:url+"/entryItem/listEntryItemsByType",
async:false,
type:"POST",
success:function(data){
$("#ItemType").append("<option value=''>请选择词条分类</option>")
for(var i=0;i<data.length;i++){
$("#ItemType").append("<option value='"+data[i]+"'>"+data[i]+"</option>")
}
},
error:function(){
console.log("出错！");
}
});
</script>
<!--加载完数据后再加载该js-->
<script src="../../static/layui/layui.all.js"></script>
<script>
//给作业项目框赋值
var form = layui.form;
form.on('select(selectItem)', function(choose){
$("#ItemInfo").html("");
$("#ItemInfo").append("<option value=''>请选择词条项目</option>");
$("#ItemIntegral1").val("")
var type = choose.value;
$.ajax({
url:url+"/entryItem/getEntryItemByType/"+type,
type:"POST",
success:function(data){
$("#ItemType").append("<option value='' score='0'>请选择词条项目</option>")
for(var i=0;i<data.length;i++){
$("#ItemInfo").append("<option score='"+data[i].score+"' value='"+data[i].id+"'>"+data[i].item+"</option>");
}
form.render();
},
error:function(){
console.log("出错！");
}
});
});
//给分数框赋值(这里是捕获上面定义的select改变事件，choose中的value为option中的value，所以option中value不可重复！！！)
form.on('select(selectIntegralItemScore)', function(choose){
var id = choose.value;
var score=0;
$("#ItemInfo option").each(function () {
if ($(this).val() == id){
score = $(this).attr("score");
}
})
$("#ItemIntegral").val(score);
});
</script>
</body>
</html>
展示效果：
注意：option中的value不可以重复！否则会出现选中后，点击其它地方，值又会改变的情况。