JavaScript事件订单返回不同的值

所以，我有2个事件附加到几个select元素。点击事件和更改事件。当用户选择一个选项时，我会跟踪之前在JS对象上选择的选项，以告诉用户该选项已被使用，并且不能重新使用并重置为默认值。如果select的前一个值不是默认值，我将从该对象中移除该属性。现在，在每次点击事件时，我都会有一个JS变量在发生变化之前给我选择的值。但是，由于触发事件（Firefox和Chrome）的顺序不同，例如，其中一个是我重置时得到的默认值，另一个是在重置之前得到的值。JavaScript事件订单返回不同的值

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

我选择的第一个下拉猫。对象现在是对象{猫：“猫”}
我在第二个下拉选择狗。对象现在是对象{猫：“猫”，狗：“狗”}
我在第二个下拉选择猫。

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

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

注意：选择猫跌落下来1，狗降下来2并承担下拉3.然后，从下拉1.在铬选择的狗，它会删除熊市，但在Firefox，它会删除猫。

在此先感谢。

来源

2015-04-02 Unknown

请提供js示例或jsfiddle – daremachine 2015-04-02 19:07:51

基于示例中的第三点我有一个问题“您是否循环遍历对象？” 。也正如@daremachine所说的，请提供一个小提琴 – 2015-04-02 19:11:36

，同时检索值是你使用不同的名称为dd1和dd2在两种情况下的形式.. ??? – 2015-04-02 19:13:57

也许这将有助于简化一些事情。这对我的作品在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>

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

来源

2015-04-02 22:02:36 Seamus

嘿Seamus，不得不使用一个对象，因为我一直跟踪一个名称/值对，每行另一个下拉菜单，但使用简化代码和使用数据属性的想法而不是我以前的东西，认为我得到它的工作。需要在Linux Chrome和Firefox上进行测试，但目前为止还在运行。感谢您的想法。欣赏它。 – Unknown 2015-04-03 08:06:42

JavaScript事件订单返回不同的值

回答

相关问题