Home/ Questions/Q 6735027
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T10:57:34+00:00

Yesterday or the day before I got some help with a drop down select

  • 0

Yesterday or the day before I got some help with a drop down select to variable value match.

What happens is that if there is a match on the drop down, they jQuery code goes through the values and checks to see if there is a match on prices and cases. If there is a mismatch then the alert box is triggered.

The first part works fine, but the second part is more tricky and I can’t seem to figure it out.

$("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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Don’t know if I understood what you’re trying to do, but maybe the following code will help.

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

    It adds the class mismatch to tds whose inputs don’t match, if the corresponding select have the same value:

    <!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>
    • 0