<form action="personalInfo.html">
    <div class="am-u-sm-12 am-u-md-12">
        <ul class="am-u-sm-12 am-u-md-6">
            <li>
                <small>部门：</small><select >
                    <option value="option1">学院办公室</option>
                    <option value="option2">党委办公室</option>
                    <option value="option3">学生工作办公室（院团委）</option>
                    <option value="option4">合作事务办公室</option>
                    <option value="option5">留学生管理办公室</option>
                    <option value="option6">基础语言教研室</option>
                  </select>
            </li>
            <li>
                <small>岗位：</small><input type="text" value="岗位" />
            </li>
            <li>
                <small>职务：</small><select>
                    <option value="option1">院长</option>
                    <option value="option2">副院长</option>
                    <option value="option3">主任</option>
                    <option value="option4">副主任</option>
                    <option value="option5">教师</option>
                    <option value="option6">职员</option>
                    <option value="option7">其他</option>
                  </select>
            </li>
            <li>
                <small>职称：</small><input type="text" value="职称">
            </li>
            <li>
                <small>性别：</small><select >
                    <option value="option1">男</option>
                    <option value="option2">女</option>
                </select>
            </li>
            <li>
                <small>出生日期：</small><label>
                    <input type="text" placeholder="请选择" value="2017-01-01">
                </label>
            </li>
            <li><small>身份证号：</small><input type="text" value="420621112"></li>
            <li><small>备注：</small><textarea></textarea></li>
        </ul>
    </div>
    <div class="am-u-sm-12 am-u-md-12">
        <div class="saveBox am-center">
            <button type="submit" class="t-save">保&nbsp;&nbsp;存</button>
            <button type="button" class="t-cancel">取&nbsp;&nbsp;消</button>
        </div>
    </div>
</form>

var beforeData = []; //定义一个变量，来接收刚开始的数据
var afterData = []; //定义一个变量，来接收后来的数据
var isModified=false;  //定义一个变量，存储数据是否改变（开关）
// 获取初始数据开始
for (var i=0;i<$("input").length;i++){
    beforeData.push($("input").eq(i).val())
}
for (var i=0;i<$("select").length;i++){
    beforeData.push($("select").eq(i).val())
}
for (var i=0;i<$("textarea").length;i++){
    beforeData.push($("textarea").eq(i).val())
}
// 获取初始数据结束
// 当用户点击了取消button
$('.t-cancel').click(function (){
    // 获取变化后的数据开始
    for (var i=0;i<$("input").length;i++){
        afterData.push($("input").eq(i).val())
    }
    for (var i=0;i<$("select").length;i++){
        afterData.push($("select").eq(i).val())
    }
    for (var i=0;i<$("textarea").length;i++){
        afterData.push($("textarea").eq(i).val())
    }
    // 获取变化后的数据结束
    // 这里开始比较两次数据变化
    for (var i=0;i<afterData.length;i++){
        if (afterData[i] != beforeData[i]) {
            // 当有一个数据和之前数据用所不同的时候，就设置isModified为false，并且就可以退出程序了（节约内存开销）
            isModified = true;
            break;
        }
    }
    // 在这来判断，根据isModified来做相关的处理
    if(isModified){
        var isLeave = window.confirm("数据已经修改，确定要离开？");
        if (isLeave) {
            history.back();
        }
    }else{
        history.back();
    }
})