Question

昨天或前一天我得到a drop down select to variable value match的帮助。

如果下拉列表中存在匹配项，那么jQuery代码将通过值并检查价格和案例是否匹配。如果不匹配，则触发警报框。

第一部分工作正常，但第二部分更棘手，我似乎无法弄明白。

$("select").change(function() {
var $this = $(this);
//first part
if ($("select").filter(function() {
    return $(this).val() === $this.val();})
    .parent()
    .next()
    .children("input[value!='" + $this
                                 .parent()
                                 .next()
                                 .children("input")
                                 .val() + "']")
    .length != 0) {

    // alert
    alert('mismatch1');

}
//second part
if ($("select").filter(function() {
    return $(this).val() === $this.val();})
    .children("td:eq(2)::has(input[value!='" + 
    $this.children("td:eq(2)>input").val() + "'])").length != 0) {
    // alert
    alert('mismatch2');

}
});

//$this.children("td:eq(2)>input").val() <<< this works

<form name="form1" ID="form1" action="array_script.cfm">
<table id="test1">
<tr>
<td>
    <select name="selectA" id="selectA" class="priceA">
        <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="priceA" type="text" name="price" value="8.99">
</td>
<td>
    <input id="perCaseA" type="text" name="perCase" value="4">
</td>
</tr>
<tr>
<td>
    <select name="selectB" id="selectB" class="priceB">
        <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="priceB" type="text" name="price" value="8.99">
</td>
<td>
    <input  id="perCaseB" type="text" name="perCase" value="4">
</td>
</tr>
<tr>
<td>
    <select name="selectC" id="selectC" class="priceC">
        <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="priceC" type="text" name="price" value="8.99">
</td>
<td>
    <input  id="perCaseC" type="text" name="perCase" value="4">
</td>
</tr>
</table>
</form>

Answer 1

不知道我是否理解你要做的事情，但也许以下代码会有所帮助。

http://jsfiddle.net/cfQSr/19/

如果相应的mismatch具有相同的值，则会将td添加到input不匹配的select中：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>js</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <style type="text/css">
      .mismatch {
        background: #ff9999;
      }
    </style>
  </head>

  <body>
    <form name="form1" ID="form1" action="array_script.cfm">
    <table id="test1">
    <tr>
    <td>
        <select name="selectA" id="selectA" class="priceA">
            <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="priceA" type="text" name="price" value="8.99">
    </td>
    <td>
        <input id="perCaseA" type="text" name="perCase" value="4">
    </td>
    </tr>
    <tr>
    <td>
        <select name="selectB" id="selectB" class="priceB">
            <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="priceB" type="text" name="price" value="8.99">
    </td>
    <td>
        <input  id="perCaseB" type="text" name="perCase" value="4">
    </td>
    </tr>
    <tr>
    <td>
        <select name="selectC" id="selectC" class="priceC">
            <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="priceC" type="text" name="price" value="8.99">
    </td>
    <td>
        <input  id="perCaseC" type="text" name="perCase" value="4">
    </td>
    </tr>
    </table>
    </form>

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

        $('#form1').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 = $('input', $(this).closest('tr')),
                  thatInputs = $('input', $(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>
  </body>
</html>

jQuery父子的属性选择器接下来查找和这个

1 个答案: