Question

我有一个从数据库动态创建的表。根据用户的操作，可以生成从1到xxx行的任何位置。

除其他字段外，每行还有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 显示我已经走了多远。

有关如何使其发挥作用的任何想法或建议？

由于

Answer 1

这有效（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');});
                }
            }                        
        });           

    });
})

Jquery - 突出显示匹配的输入字段

1 个答案: