返回不同值的JavaScript事件顺序_Javascript_Jquery

返回不同值的JavaScript事件顺序

javascript jquery

返回不同值的JavaScript事件顺序,javascript,jquery,Javascript,Jquery,因此，我有两个事件附加到几个select元素。单击事件和更改事件。当用户选择一个选项时，我会跟踪以前在JS对象上选择的选项，告诉用户该选项已被使用，无法重用，并将该选项重置为默认值。如果select的上一个值不是默认值，我将从对象中删除该属性。现在，在每次单击事件中，我都会让一个JS变量在更改发生之前给我该选择的值。但是，由于触发Firefox和Chrome的事件顺序不同，例如，在其中一个事件中，我得到的默认值是在它重置时，而在另一个事件中，我得到的值正好在重置之前 HTML: 我在第一个下拉列

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

HTML:

我在第一个下拉列表中选择cat。对象现在是对象{cat:cat} 我在第二个下拉列表中选择狗。对象现在是对象{cat:cat，dog:dog} 我在第二个下拉列表中选择cat。在这一点上，firefox返回我dog作为前一个值，这是我想要的，但是Chrome返回我零，因为重置，并且当它设置值时，因为事件触发顺序。有什么想法吗？我如何以不同的方式处理这个问题

JS对象的一个原因是，我需要有一个列表，列出哪些值在以后提交时使用，哪些值尚未使用。值必须是唯一的

注意：下拉列表1选择猫，下拉列表2选择狗，下拉列表3选择熊。然后，从下拉列表1中选择“狗”。在chrome上，它将删除bear，但在Firefox上，它将删除cat

提前谢谢。

也许简化一点会有帮助。这在Chrome、IE 9+和Firefox中适用：

var alreadyUsed=[]； $document.ready函数{ $select[name^='dd'].dataprevious，0； $select[name^='dd'].onchange，functionevent{ var newValue=$this.val； var prevValue=$this.dataprevious； ifalreadyUsed.indexOfnewValue==-1{ ifprevValue！=0 alreadyUsed.splice alreadyUsed.indexOfprevValue，1； alreadyUsed.pushnewValue； $this.dataprevious，newValue； }否则{ alertField已在使用。\n请选择其他字段。； $this.valprevValue； } }; }; -挑选- 猫狗熊 -挑选- 猫狗熊 -挑选- 猫狗熊

请提供js示例或JSFIDDLE基于示例中的第三点，我有一个问题，您是否在循环对象。另外，正如@daremachine所说，在检索值时，请提供一个fiddle。您是否在表单中的两种情况下使用不同的名称，如dd1和dd2。？？请提供您的JS/jQueryHey Seamus，必须使用一个对象，因为我一直跟踪名称/值对，每行都有一个下拉列表，但是，使用简化代码和使用数据属性的想法，而不是我以前所拥有的，我认为我让它工作了。需要在LinuxChrome和Firefox上进行测试，但到目前为止还可以。谢谢你的建议。谢谢。

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

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