jquery - 突出顯示匹配輸入域

我有一個從數據庫動態創建的表。根據用戶在做什麼，可以存在從1到xxx行的任何地方。jquery - 突出顯示匹配輸入域

除了其他字段外，每行還有一個DropDown和Input字段。當下拉字段發生更改時，該值將寫入相同的行輸入字段。這個效果很好。

由於每行都有相同的下拉選項，我試圖檢查2個或更多是否使用相同的值。

該下拉菜單是類似於：

<select name="sel[]" id="sel1" class="select" /> 
     <option></option> 
     <option value="123">Option 1-1</option> 
     <option value="456">Option 1-2</option> 
     <option value="789">Option 1-3</option> 
</select>

例如：

如果第1個選項1-1被選擇。這會將123寫入第1行的相應輸入字段。

如果第3行選擇選項3-1，則將123寫入其輸入字段。

在這一點上，我希望row3的輸入字段的背景變成黃色，因爲它與另一行輸入值匹配。

當選擇不同的值時，如果沒有匹配，我希望背景恢復爲白色。

我希望是有道理的..

我使用jQuery是：

$(document).ready(function(){ 
$('#frm1').on('change', 'select[name="sel[]"]', function (event) { 
     var data = $(this).val(); var id = $(this).attr('id'); 
     $('#new_'+id).val(data); 

    $('.select').not($(this)).each(function (index) { 
     var test = $(this).val(); var id = $(this).attr('id'); 

     if (data === test) { 
      $('#new_' + id).css('background-color', '#FFFF80'); 
     } else { 
      $('#new_' + id).css('background-color', '#FFFFFF'); 
     } 
    });  
}); 
});

而且那裏有一個FIDDLE顯示我多遠它得到。

有關如何使其發揮作用的任何想法或建議？

感謝

來源

2014-09-02 Rocket

此作品（Fiddle）：

<body> 
<form id="frm1"> 
    <table style="text-align: left; width: 100%;" border="0" 
cellpadding="2" cellspacing="2"> 
    <tbody> 
     <tr> 
     <td style="width: 146px;"> 
     <select name="sel[]" id="sel1" class="select" /> 
     <option></option> 
     <option value="123">Option 1-1</option> 
     <option value="456">Option 1-2</option> 
     <option value="789">Option 1-3</option> 
     </select> 
     </td> 
     <td style="width: 1458px;"><input name="new_sel1" id="new_sel1"></td> 
     </tr> 
     <tr> 
     <td style="width: 146px;"> 
     <select name="sel[]" id="sel2" class="select" /> 
     <option></option> 
     <option value="123">Option 2-1</option>  
     <option value="456">Option 2-2</option> 
     <option value="789">Option 2-3</option> 
     </select> 
     </td> 
     <td style="width: 1458px;"><input name="new_sel2" id="new_sel2"></td> 
     </tr> 
     <tr> 
     <td style="width: 146px;"> 
     <select name="sel[]" id="sel3" class="select" /> 
     <option></option> 
     <option value="123">Option 3-1</option> 
     <option value="456">Option 3-2</option> 
     <option value="789">Option 3-3</option> 
     </select> 
     </td> 
     <td style="width: 1458px;"><input name="new_sel3" id="new_sel3"></td> 
     </tr> 
    </tbody> 
    </table> 
    <br> 
</form> 
</body>

的JavaScript：

$(document).ready(function(){ 

     $('#frm1').on('change', 'select[name="sel[]"]', function (event) { 
      var data = $(this).val(); 
     var id = $(this).attr('id'); 
     $('#new_'+id).val(data);  
     $("input[name^='new_sel']").css('background-color', '#FFFFFF'); 

     $("input[name^='new_sel']").each(function(){ 
      var currentVal = $(this).val(); 
      if(currentVal != undefined && currentVal != "" && currentVal != null) 
      { 
       var inputs = $("input[value="+currentVal+"]") 
       if(inputs.length > 1) 
       { 
        inputs.each(function(){$(this).css('background-color', '#FFFF80');}); 
       } 
      }       
     });   

    }); 
})

來源

2014-09-02 08:47:32

藝術 - 完美的感謝：d – Rocket 2014-09-02 12:04:34

歡迎您:-) – 2014-09-02 12:17:49

只注意到一個小問題。如果同一行上的另一個輸入具有相同的值，例如：123，那麼它也會突出顯示。我們如何才能使它突出顯示'new_sel *'字段而不是其他字段。我試過改變'inputs.each（function（）{$（this）.css（'background-color'，'＃FFFF80'）;}）;''''（「input [name^='new_sel '）「）。each（function（）{$（this）.css（'background-color'，'＃FF4040'）;}）;'但這沒有幫助。謝謝 – Rocket 2014-09-02 14:31:02

jquery - 突出顯示匹配輸入域

回答

相關問題