how do I create a jQuery nTier select compare script?

假装没事ソ 提交于 2020-01-16 12:02:16

问题


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>

回答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
    }
});


来源:https://stackoverflow.com/questions/7793856/how-do-i-create-a-jquery-ntier-select-compare-script

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!