[jQuery] next / siblings issue
I'm building cascading selects, but because they could come from
mulitple locations within the HTML, I need to capture the ID of the
parent select (easy enough) and the child select.
This correctly displays the parent select:
var ddlSource = this.id;
alert(ddlSource);
This enumerates all siblings, including the child select:
var x = $("#" + this.id).siblings();
alert (x.length);
for (var i = 0; i < x.length; i++) {
alert(x[i].id);
}
However, I cannot manage to display the next select within the same
<td> using the next(expr) statement. My code has changed a thousand
times, but currently looks like:
Doesn't work:
var ddlTarget = $("#" + ddlSource.id).next('select');
alert(ddlTarget.id);
The HTML is really simple:
<table class="form">
<tr>
<td class="label" width="200">Category*</td>
<td>
<select name="ctl00$cphMain$repSkills
$ctl00$ddlSkillCategory_ID"
id="ctl00_cphMain_repSkills_ctl00_ddlSkillCategory_ID"
class="SkillCategory">
<option value="-1">Skill or Service</option>
<option value="150">--Other</option>
</select>
<span id="ctl00_cphMain_repSkills_ctl00_spanSkillError"
style="display:none;"></span>
<br />
<select name="ctl00$cphMain$repSkills
$ctl00$ddlSkillSubCategory_ID"
id="ctl00_cphMain_repSkills_ctl00_ddlSkillSubCategory_ID"
style="display:none;">
</select>
<span id="ctl00_cphMain_repSkills_ctl00_spanSubSkillError"
style="display:none;"></span>
</td>
</tr>
</table>
Why does the siblings()[4] return my child dropdown, whereas next
('select') doesn't? I'm aware that next only gets the very next item,
but according to the docs adding an expression should make it jump to
the next sibling of that type.
Note, I've also tried logic down the route of:
alert($(this).siblings('~ select').id);
...but with no luck
I'm sure this is just me missing something really simple, but can
someone please steer me down the right path?