Question

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

作为一个简单的例子，我们可能有两个不同的选择器;

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

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

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

Answer 1

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

Answer 2

这是一个更有活力的解决方案：

获取页面上的所有选项，存储并循环显示
查看有多少选项与当前选项具有相同的值
如果有多个具有相同值，请更新父<td>的颜色，否则将其设为白色。

您可以运行以下代码段来查看其实际效果。

＆＃13;

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

＆＃13;

td { height: 50px; width: 50px; }

＆＃13;

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

＆＃13;

Answer 3

首先，您需要在更改选择字段时触发功能。因此，在两个选择字段中添加相同的onchange函数。

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

然后创建一个Javascript函数，比较两个选择字段以查看它们是否相同。如果是，请产生您想要的任何错误。

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.*/
  }
}

突出显示if两个选择输入共享一个值？

3 个答案: