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

Posted 2023-05-09

【中文标题】选择表单更改，弹出警报然后发送表单

【英文标题】：Select form changes, pop up alert then send form

【发布时间】：2018-04-14 17:20:06

【问题描述】：

我使用了 Greg Hornby 在此链接上给出的答案“When html select form changes, pop up alert then send form” 它工作得很好，但是对于一个问题，即使我们按下取消按钮，选择框仍然会发生变化，它不会保存更改，但是如果我们刷新页面它会恢复它会显示更改，但是当我们更改选择框时它会暂时显示节目变了， 我的问题是如果我们按下取消，我们如何防止选择框发生变化

我的代码是

<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>

【参考方案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>

【讨论】：

“我们阻止选择框更改”这并不意味着“更改为默认值”

这很好用，但是我正在使用这个选择框和使用 php 选择的值，所以这样做是将值更改为 selectedIndex=0 有什么方法可以保留这些值根据php选择而不是选择0索引

【参考方案2】：

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

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

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