Question

I am working with jQuery on trying to creating a match/mismatch alert. Basically I have an nTier series of drop downs and input fields.

If a user drops down the select and chooses a value and that value matches another select group drop down. I then need to go and compare the price and perCase values and make sure there is a match.

If the prices don’t match, I need to generate an alert…If the cases don’t match I need to generate an alert.

I can do two, but I need this to aggregate and persist over an nTier amount of select/price/case groups and I am getting confused on how to do this.

Here is a cleaned up simplified form that I am working with.

<form name="form1" ID="form1">
<table>
<tr>
<td>
    <select name="selectA">
        <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">
        <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>
</table>
</form>

Answer 1

I was sure this should be possible just using jQuery selectors, but not quite. Ah well. 🙂

This selects all of the select elements and then filters then by checking their values against the triggering select (apparently xxx[value="xx"] doesn’t work for select). The input following any matching selects (the price textbox) is then filtered to make sure it doesn’t have the same value as the triggering select‘s following input. If you still get matches, you have an inconsistency and need an alert.

The rather ugly parent().next().children() is unfortunately needed because of the table.

You’ll need an analogous bit of code for the per case, um, case. I don’t think you can check both at once unfortunately.

$("select").change(function ()
{
    var $this = $(this);

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