突出显示<td>如果两个选择输入共享一个值

Highlighting a <td> if two select inputs share a value?

本文关键字：输入 选择 共享 一个 两个 显示 gt td 如果 lt      更新时间：2023-09-26

我们有一个表单，它有几个唯一命名的元素；但是所有这些元素共享同一组选项（包括名称/id等）。问题是，如果两个选择器设置为同一选项，我们需要向用户发出警告（即星号或td变为背景色红色）。

因此，作为一个快速的例子，我们可能有两个不同的选择器；

<select name="ServiceName-1">
...options..
</select>
<select name="ServiceName-2">
...options..
</select>

所有选项都共享id和名称。简而言之，如果ServiceName-n与任何其他ServiceName-n共享一个选定的选项id，我们需要执行一个操作，比如更改td颜色，或者使带有星号的div可见。

$('[name*="ServiceName-"]').change(function(){
 if( $('[name="ServiceName-1"]').val()==$('[name="ServiceName-2"]').val() ) {
  $('.tdClass').css('background-color','yellow');
 }
});

这里有一个更动态的解决方案：

  1. 获取页面上的所有选择，存储并循环浏览它们
  2. 查看有多少选择与当前选择具有相同的值
  3. 如果有多个具有相同值，请更新父<td>的颜色，否则，将其设为白色

您可以运行以下代码段来查看它的运行情况。

$(function() {
  markDuplicates();
});
$("select").on("change", function() {
  markDuplicates();
});
function markDuplicates() {  
  //get all the selects on the page and store a collection
  var selectedValues = $("select");
  
  //loop through all the selects
  selectedValues.each(function() {
    color = "#FFF"; //set a default background color for the current select (white)
    var value = this.value; //store the current selected value
    
    //get all selects that match the current value
    var dupes = selectedValues.filter(function() {
      return this.value === value;
    });
    
    //if there's more than one with the selected value then we will have a new color for the td
    if (dupes.length > 1) {
      var color = dupes.find("option").filter(function() {
        return this.value === value;
      }).attr("data-color"); //get the value data-color from the selected value
    }
    
    //get the closest td and set its background color
    dupes.closest("td").css("backgroundColor", color);
  });
                           
}
td { height: 50px; width: 50px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <select name="ServiceName-1">
        <option data-color="#F00">One</option>
        <option data-color="#0F0">Two</option>
        <option data-color="#00F">Three</option>
      </select>
    </td>
    <td>
      <select name="ServiceName-2">
        <option data-color="#F00">One</option>
        <option data-color="#0F0">Two</option>
        <option data-color="#00F">Three</option>
      </select>
    </td>
    <td>
      <select name="ServiceName-3">
        <option data-color="#F00">One</option>
        <option data-color="#0F0">Two</option>
        <option data-color="#00F">Three</option>
      </select>
    </td>
    <td>
      <select name="ServiceName-4">
        <option data-color="#F00">One</option>
        <option data-color="#0F0">Two</option>
        <option data-color="#00F">Three</option>
      </select>
    </td>
  </tr>
</table>

首先，当选择字段发生更改时，您需要触发一个函数。因此，将相同的onchange函数添加到两个选择字段中。

<select onchange="checkFields();" name="ServiceName-1">

然后创建一个Javascript函数，比较两个select字段，看看它们是否相同。如果是，则生成您想要的任何错误。

function checkFields() {
  var sel-1 = document.getElementsByName("ServiceName-1")[0];
  var sel-2 = document.getElementsByName("ServiceName-2")[0];
  if (sel-1.value == sel-2.value) {
    alert("Error!");
    /*Since I can't see the rest of your html, you will need to create a snippet here 
      that will make the tables red or whatever.*/
  }
}
相关文章：