JavaScript 事件命令返回不同的值

因此，我有 2 个事件附加到多个选择元素。一个点击事件和一个更改事件。当用户选择一个选项时，我会跟踪 JS 对象上先前选择的选项，以告诉用户该选项已被使用且无法重复使用，并将该选择重置为默认值。如果选择的先前值不是默认值，我会从对象中删除该属性。现在，在每次点击事件中，我都会有一个 JS 变量在更改发生之前为我提供该选择的值。但是，由于触发事件的顺序不同(例如 Firefox 和 Chrome)，在一个中我得到重置时的默认值，而在另一个中我得到重置之前的值。

HTML:

<html>
<head>
    <title>Objects test on Browsers</title>
</head>
<body>
<div class="container">
    <select name="dd1">
        <option value="0">-Select-</option>
        <option value="cat">cat</option>
        <option value="dog">dog</option>
        <option value="bear">bear</option>
    </select>
    <br />
    <br />
    <select name="dd2">
        <option value="0">-Select-</option>
        <option value="cat">cat</option>
        <option value="dog">dog</option>
        <option value="bear">bear</option>
    </select>
    <br />
    <br />
    <select name="dd3">
        <option value="0">-Select-</option>
        <option value="cat">cat</option>
        <option value="dog">dog</option>
        <option value="bear">bear</option>
    </select>
    <br />
    <br />
</div>
</body>
</html>

JavaScript:

var alreadyUsed = {};
var prevField = "";

$(function() {
    // Events for drop downs
    $("select[name^='dd']").on("focus", function(event) {
        prevField = $(this).val();
        console.log(prevField);
    }).on("change", function(event) {
        var fieldInUsed = checkNotUsedAlready("fields", $(this).val());

        if (fieldInUsed === true) {
            delete alreadyUsed[prevField];

            $(this).val(0);
        } else {
            var selectField = $("select[name='" + event.target.name + "']" + " option:selected");

            if (selectField.html() != "-Select-") {
                alreadyUsed[selectField.html()] = $(this).val();
            } else {
                delete alreadyUsed[prevField];
            }
        }
    });
});

function checkNotUsedAlready(type, value) {
    var fieldColInUse = false;

    if (type == "fields") {
        for (var prop in alreadyUsed) {
            if (alreadyUsed.hasOwnProperty(prop)) {
                if (prop == value) {
                    fieldColInUse = true;
                    alert("Field is already in use.\nPlease, select a different field.");

                    break;
                }
            }
        }
    } else if (type == "columns") {
        for (var prop in alreadyUsed) {
            if (alreadyUsed.hasOwnProperty(prop)) {
                if (alreadyUsed[prop] == value) {
                    fieldColInUse = true;
                    alert("Column is already in use.\nPlease, select a different column or custom.");

                    break;
                }
            }
        }
    }

    return fieldColInUse;
}

我在第一个下拉列表中选择猫。对象现在是对象{cat:"cat"}
我在第二个下拉列表中选择狗。对象现在是对象{cat:“cat”，dog:“dog”}
我在第二个下拉菜单中选择了猫。

此时，火狐将狗返回为先前的值，这正是我想要的，但Chrome由于重置以及由于事件触发顺序而设置值时返回零。有什么想法我可以如何以不同的方式处理这个问题？

使用 JS 对象的原因之一是我需要一个列表，其中列出哪些值用于稍后提交，哪些值尚未使用。值必须是唯一的。

注意:为下拉菜单 1 选择猫，为下拉菜单 2 选择狗，为下拉菜单 3 选择熊。然后，从下拉菜单 1 中选择狗。在 chrome 上，它将删除 bear，但在 Firefox 上，它将删除 cat。

提前致谢。

最佳答案

也许这有助于简化事情。这适用于 Chrome、IE 9+ 和 Firefox:

var alreadyUsed = [];

$(document).ready( function() {
    $("select[name^='dd']").data("previous","0");
    
    
    $("select[name^='dd']").on("change", function(event) {
        var newValue = $(this).val();
        var prevValue = $(this).data("previous");
        
        if(alreadyUsed.indexOf(newValue) == -1){
            if(prevValue != "0") alreadyUsed.splice( alreadyUsed.indexOf(prevValue), 1 );
            
            alreadyUsed.push(newValue);
            
            $(this).data("previous",newValue);
        }else{
            alert("Field is already in use.\nPlease, select a different field.");
            $(this).val(prevValue);
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <select name="dd1">
        <option value="0">-Select-</option>
        <option value="cat">cat</option>
        <option value="dog">dog</option>
        <option value="bear">bear</option>
    </select>
    <br />
    <br />
    <select name="dd2">
        <option value="0">-Select-</option>
        <option value="cat">cat</option>
        <option value="dog">dog</option>
        <option value="bear">bear</option>
    </select>
    <br />
    <br />
    <select name="dd3">
        <option value="0">-Select-</option>
        <option value="cat">cat</option>
        <option value="dog">dog</option>
        <option value="bear">bear</option>
    </select>
    <br />
    <br />
</div>

您的代码有点复杂，显然还可以做其他事情，但也许这个简单的工作版本会有所帮助。

关于JavaScript 事件命令返回不同的值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29420549/

JavaScript 事件命令返回不同的值

上一篇：javascript - 显示用于网站打印的 PDF

下一篇：javascript - 如何从异步调用返回响应？