jQueryコードがfirefoxまたはchromeセレクタの値不一致スクリプトで動作しない

Question

このビットのコードは、数人によって助けられました。 jsFiddleでうまくいきますが、いくつかのライブコードに対してローカルで実行しようとすると失敗します...私は5時間それを使って作業していますが、何が失われているのか分かりません。 jqueryスクリプト、スタイルコンテナ、フォーム/テーブル構造を追加しました。

<script type="text/javascript"> 
$(document).ready(function() { 
"use strict"; 

$('#addForm').bind('change', function(evt) { 
    $('td.mismatch', this).removeClass('mismatch'); 

    var selects = $('select', this); 
    $(selects).each(function() { 
     var that = this; 
     $(selects).not(this).each(function() { 

      // we have a similar select 
      if ($(this).val() !== '' && $(this).val() === $(that).val()) { 
       // now compare inputs 
       var 
        thisInputs = $('#grouperCost , #casePackForGroups', $(this).closest('tr')), 
        thatInputs = $('#grouperCost , #casePackForGroups', $(that).closest('tr')); 

       $(thisInputs).each(function(i) { 
        if ($(this).val() !== $(thatInputs).eq(i).val()) { 
         $(this).closest('td').addClass('mismatch'); 
         $(thatInputs).eq(i).closest('td').addClass('mismatch'); 
        } 
       }); 
      } 
     }); 
    }); 
}); 
}()); 
</script> 

<style>.mismatch {background: #ff9999;}</style> 

<form name="form1" ID="addForm" action="array_script.cfm"> 
<table> 
<tr> 
    <td> 
     <select name="selectA"> 
      <option id="A" value="">None</option> 
      <option id="A" value="A">A</option> 
      <option id="A" value="B">B</option> 
      <option id="A" value="C">C</option> 
     </select> 
    </td> 
    <td> 
     <input ID="grouperCost" type="text" name="price" value="8.99" /> 
    </td> 
    <td> 
     <input ID="casePackForGroups" type="text" name="perCase" value="4" /> 
    </td> 
</tr> 
<tr> 
    <td> 
     <select name="selectB"> 
      <option id="B" value="">None</option> 
      <option id="B" value="A">A</option> 
      <option id="B" value="B">B</option> 
      <option id="B" value="C">C</option> 
     </select> 
    </td> 
    <td> 
     <input ID="grouperCost" type="text" name="price" value="8.98" /> 
    </td> 
    <td> 
     <input ID="casePackForGroups" type="text" name="perCase" value="5" /> 
    </td> 
</tr> 
<tr> 
    <td> 
     <select name="selectC"> 
      <option id="C" value="">None</option> 
      <option id="C" value="A">A</option> 
      <option id="C" value="B">B</option> 
      <option id="C" value="C">C</option> 
     </select> 
    </td> 
    <td> 
     <input ID="grouperCost" type="text" name="price" value="8.99" /> 
    </td> 
    <td> 
     <input ID="casePackForGroups" type="text" name="perCase" value="4" /> 
    </td> 
</tr> 
</table> 
</form> 

Answer 1

私は答えはありませんが、私はあなたのコードでいくつかの奇妙な文句を見つけました。

あなたはこれを書く：

varが= $を選択する（ '選択'、この）; //すべてのALLは+フォーム要素を選択し $（選択）.each（関数（）{//サイクルを選択するには要素

なぜあなたは、セレクトコレクションに現在のフォームを追加するには？

なぜあなたは、彼らが必要か？「タイプの強制せずに平等」（===）演算子を使用していますか？

は、あなたがしようとしましたFirefoxを「ステップバイステップ」でデバッグしますか？

なぜ変数やテキストボックスにログを書き、結果をjsFiddleで実行された同じコードと比較しないのですか？

希望します。