Question

所以，我有2个事件附加到几个选择元素。点击事件和更改事件。当用户选择一个选项时，我会跟踪JS对象上先前选择的选项，告诉用户该选项已被使用且无法重复使用并重置为选择默认值。如果select具有非默认值的先前值，则从对象中删除该属性。现在，在每次点击事件中，我都会有一个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;
}

我在第一次下拉时选择猫。对象现在是Object {cat：“cat”}
我在第二次下拉时选择了狗。对象现在是对象{cat：“cat”，dog：“dog”}
我在第二次下拉时选择了猫。

此时，firefox将我的狗作为前一个值返回，这就是我想要的，但Chrome因为重置而返回零，并且由于事件触发顺序而设置了值。任何想法如何以不同的方式处理这个问题？

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

注意：选择cat for Drop down 1，dog for drop down 2 and bear for Drop Down 3.然后，选择dog from Drop Down 1.在chrome上，它会删除bear但是在Firefox上，它会删除cat。

提前致谢。

Answer 1

也许这有助于简化一些事情。这适用于Chrome，IE 9+和Firefox：

＆＃13;

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

＆＃13;

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

＆＃13;

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

JavaScript事件命令返回不同的值

1 个答案: