select不可修改且不影响传值的解决方案

为什么这么做

select标签不支持readonly属性，如果设置为disabled，则影响传值（解决方法：虽然可以在表单提交之前去掉disabled，但是我觉得麻烦）

原理

先保存当前被选中的值，当触发onchange事件时，就把下拉框被选中的值改为当前保存的值

具体代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>select不可修改且不影响向后端传值的解决方案</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<!--给表单设置id为"test_form"-->
<form action="" id="test_form">

    <select data-selected_value="3" name="test" onchange="$(this).val($(this).data('selected_value'));alert('不可修改');">
        <option value="1">1</option>
        <option value="2">2</option>
        <option selected value="3">3</option>
    </select>
    <button type="button" style="width: 50px;height: 50px" onclick="submit_form()">提交</button>
</form>
<script type="text/javascript">
    function submit_form() {
        //如果有值则说明不影响传值
        alert($('#test_form').serialize());
    }
</script>

</body>
 
</html>

data-selected_value的值一定是当前被选中的值

原文链接：https://blog.csdn.net/qq_45490619/article/details/113573251