如何让取消的警报在警报“取消”后返回到相同的前一个选项？

Question

在警报中选择“取消”后，如何让选项框返回到之前选择的相同位置？

现在代码可以正常工作，现在它转到名为“Common Languages”的“禁用”选项，没有任何功能。这不是它应该的工作方式。

我想要的是在警报中选择“取消”后返回之前选择的选项。

JavaScript：

<script type="text/javascript">
$(document).on('click', ':not(form)[data-confirm]', function(e){
    if(!confirm($(this).data('confirm'))){
        e.stopImmediatePropagation();
        e.preventDefault();
    }
});

$(document).on('submit', 'form[data-confirm]', function(e){
    if(!confirm($(this).data('confirm'))){
        e.stopImmediatePropagation();
        e.preventDefault();
    }
});

$(document).on('input', 'select', function(e){
    var msg = $(this).children('option:selected').data('confirm');
    if(msg != undefined && !confirm(msg)){
        $(this)[0].selectedIndex = 0;
    }
});
</script>

HTML：

<select name="LangF" id="opt">
<option value="" disabled>Common Languages:</option>
<option value="zh-CN">Chinese (Simplified)</option>
<option selected value="en">English</option>
<option value="fr">French</option>
<option value="de">German</option>
<option value="ru">Russian</option>
<option value="es">Spanish</option>
<option value="" disabled>&#8212;</option>
<option value="auto" data-confirm=" The ´´Automatic Language Detection´´ does not detect laguadges in frames / sandbox. Are you sure you want to select this option? ">Auto Detect</option>
<option value="" disabled>&#8212;</option>
<option value="" disabled>Other Languages:</option>
<option value="af">Afrikaans</option>
<option value="sq">Albanian</option>
<option value="ar">Arabic</option>
<option value="hy">Armenian</option>
<option value="az">Azerbaijani</option>
</select>

现在它可以工作，但问题是它转到名为“Common Languages:”的选项的 1 值，即“禁用”。我认为必须有一种方法可以使它转到另一个值，例如如果不是以前的选定值，则从选项中称为“English”的自动“选定”值。

Answer 1

这是您的解决方案（总代码）：

<script type="text/javascript">
$(document).on('click', ':not(form)[data-confirm]', function(e){
    if(!confirm($(this).data('confirm'))){
        e.stopImmediatePropagation();
        e.preventDefault();
    }
});

$(document).on('submit', 'form[data-confirm]', function(e){
    if(!confirm($(this).data('confirm'))){
        e.stopImmediatePropagation();
        e.preventDefault();
    }
});
var arr = [];
$(document).on('input', 'select', function(e){
    arr.push($(this)[0].selectedIndex)
    var msg = $(this).children('option:selected').data('confirm');
    if(msg != undefined && !confirm(msg)){
        $(this)[0].selectedIndex = arr[arr.length-2];
    }
});
</script>  

这里没有任何变化：

<select name="LangF" id="opt">
<option value="" disabled>Common Languages:</option>
<option value="zh-CN">Chinese (Simplified)</option>
<option selected value="en">English</option>
<option value="fr">French</option>
<option value="de">German</option>
<option value="ru">Russian</option>
<option value="es">Spanish</option>
<option value="" disabled>&#8212;</option>
<option value="auto" data-confirm=" The ´´Automatic Language Detection´´ does not detect laguadges in frames / sandbox. Are you sure you want to select this option? ">Auto Detect</option>
<option value="" disabled>&#8212;</option>
<option value="" disabled>Other Languages:</option>
<option value="af">Afrikaans</option>
<option value="sq">Albanian</option>
<option value="ar">Arabic</option>
<option value="hy">Armenian</option>
<option value="az">Azerbaijani</option>
</select>

确实有效。

Answer 2

表单加载后，将状态缓存在对象中。您可以编写一个函数来更新此缓存对象，以便在成功后您可以轻松地更新缓存，以备将来发生取消或错误时使用。您可以创建另一个函数来循环缓存对象并设置属性（和值）。这是我所知道的不使用页面重新加载或通过 ajax（websocket 等）重新加载数据的唯一方法。