获取Select标签修改之前的值

最新推荐文章于 2024-01-03 10:31:41 发布

koastal

最新推荐文章于 2024-01-03 10:31:41 发布

阅读量1.4w

点赞数 2

分类专栏： HTML+CSS

本文链接：https://blog.csdn.net/koastal/article/details/78512670

版权

HTML+CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

select标签在修改内容时，会触发change事件，在该事件中可以获取修改之后的值，而修改之前的值是获取不到的。

目前有一个需求是，当用户修改select的内容时，弹出确认框询问用户是否确认修改，如果用户点击取消，则select标签的值重置为修改之前的值。

解决思路，为select标签添加hook属性，用于保存select标签当前的值，当select触发change事件时，hook属性的值保存了修改之前select的值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<select id="demo">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$("#demo").change(function () {
    var val = $(this).val();
    var res = confirm("您确认修改为"+val+"么？");
    if(res == true){
        //确认
        $(this).attr("hook",val);
    }else{
        //取消
        if(typeof $(this).attr("hook") == "undefined"){
            //尚未做过选择，重置为默认选择
            $(this).val($(this).children("option:first-child").val());
        }else{
            //重置为修改之前的选择
            $(this).val($(this).attr("hook"));
        }
    }
});
</script>
</body>
</html>