Select 表单更改，弹出警报然后发送表单

Question

我使用了 Greg Hornby 对此 link 给出的答案“When html select form changes, pop up alert then send form” 它运行良好，但有一个问题，即使我们按下取消按钮，select 框仍然会更改，它不会保存更改，但如果我们刷新页面，它会恢复显示，但会在我们更改时显示片刻它显示的 select 框已更改，我的问题是，如果我们按下取消

，我们如何才能防止 select 框发生变化

我的密码是

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form method="post" action="">
<select name="payment_status" class="form-control status_select" onchange="if(confirm('Are you sure you want to Change this Status?')){this.form.submit()}">
 <option value="">Select Payment Status</option>
 <option value="Un paid">Un-paid</option>
 <option value="Paid">Paid</option>
</select>
</form>

Answer 1

在else语句中使用prop()将所选选项设置为false：

$("select").change(function(){
    if(confirm('Are you sure you want to Change this Status?')){
        {this.form.submit()} 
    }
    else $("select option:selected").prop("selected", false);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form method="post" action="">
<select name="payment_status" class="form-control status_select">
 <option value="">Select Payment Status</option>
 <option value="Un paid">Un-paid</option>
 <option value="Paid">Paid</option>
</select>
</form>

Answer 2

例如，您可以将初始状态设置为一个变量，然后在确认更改后更新该变量。取消时，将值重置为先前确认或初始状态，如下所示：

<script>
var initial = '<?php echo "Paid"; ?>'; 
function reset(){ $("select").val(initial); }
</script>

和 onChange 如果确认，则提交，否则 reset()

Select 表单更改，弹出警报然后发送表单

Select form changes, pop up alert then send form

forms

jquery

select

onchange