[jQuery] Re: next / siblings issue

Given this html:

<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>

This JavaScript will cause the second select to show when the first
one is changed:
$(document).ready(function(){
$('#ctl00_cphMain_repSkills_ctl00_ddlSkillCategory_ID').change
(function(){
$(this).nextAll('select').show();
});
});

Hope that gets you further along :)

On Mar 29, 12:58 pm, Dunc <duncan.we...@gmail.com> wrote:
> Nope, it would seem I'm failing jQuery101.
>
> I've tried:
>
> var ddlSource = this.id;  // this works perfectly
> alert(ddlSource);
>
> var ddlTarget = $(this).nextAll('select');
> alert('target1: ' + ddlTarget.id);
>
> ddlTarget = $(ddlSource).nextAll('select');
> alert('target2: ' + ddlTarget.id);
>
> ddlTarget = $("#" + ddlSource.id).nextAll('select');
> alert('target3: ' + ddlTarget.id);
>
> ...all come up undefined.  I've  put the ID onto the previous line,
> and just displayed the final value - same result.  I've read the
> jQuery docs (http://docs.jquery.com/Traversing/nextAll) and a bunch of
> other stuff, all which hint at what I'm doing being correct.  I'm also
> aware that id is part of javascript as opposed to raw jQuery so I've
> tried to filter 'em out.
>
> Any other hints?
>
> On 29 Mar, 15:28, mkmanning <michaell...@gmail.com> wrote:
>
> > Adding the expr just filters the matched elements further. Try .nextAll
> > ('select').
>
> > On Mar 29, 2:42 am, Dunc <duncan.we...@gmail.com> wrote:
>
> > > 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?- Hide quoted text -
>
> > - Show quoted text -