Note that there are some explanatory texts on larger screens.

plurals
  1. POAttribute selectors in jQuery parent child next find and this
    text
    copied!<p>Yesterday or the day before I got some help with <a href="https://stackoverflow.com/q/7793856/115845">a drop down select to variable value match</a>.</p> <p>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. </p> <p>The first part works fine, but the second part is more tricky and I can't seem to figure it out.</p> <pre><code>$("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)&gt;input").val() + "'])").length != 0) { // alert alert('mismatch2'); } }); //$this.children("td:eq(2)&gt;input").val() &lt;&lt;&lt; this works &lt;form name="form1" ID="form1" action="array_script.cfm"&gt; &lt;table id="test1"&gt; &lt;tr&gt; &lt;td&gt; &lt;select name="selectA" id="selectA" class="priceA"&gt; &lt;option id="A" value=""&gt;None&lt;/option&gt; &lt;option id="A" value="A"&gt;A&lt;/option&gt; &lt;option id="A" value="B"&gt;B&lt;/option&gt; &lt;option id="A" value="C"&gt;C&lt;/option&gt; &lt;/select&gt; &lt;/td&gt; &lt;td&gt; &lt;input id="priceA" type="text" name="price" value="8.99"&gt; &lt;/td&gt; &lt;td&gt; &lt;input id="perCaseA" type="text" name="perCase" value="4"&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; &lt;select name="selectB" id="selectB" class="priceB"&gt; &lt;option id="B" value=""&gt;None&lt;/option&gt; &lt;option id="B" value="A"&gt;A&lt;/option&gt; &lt;option id="B" value="B"&gt;B&lt;/option&gt; &lt;option id="B" value="C"&gt;C&lt;/option&gt; &lt;/select&gt; &lt;/td&gt; &lt;td&gt; &lt;input id="priceB" type="text" name="price" value="8.99"&gt; &lt;/td&gt; &lt;td&gt; &lt;input id="perCaseB" type="text" name="perCase" value="4"&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; &lt;select name="selectC" id="selectC" class="priceC"&gt; &lt;option id="C" value=""&gt;None&lt;/option&gt; &lt;option id="C" value="A"&gt;A&lt;/option&gt; &lt;option id="C" value="B"&gt;B&lt;/option&gt; &lt;option id="C" value="C"&gt;C&lt;/option&gt; &lt;/select&gt; &lt;/td&gt; &lt;td&gt; &lt;input id="priceC" type="text" name="price" value="8.99"&gt; &lt;/td&gt; &lt;td&gt; &lt;input id="perCaseC" type="text" name="perCase" value="4"&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/form&gt; </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload