Question

I’m trying to access a drop down box from a page created by SQL Server Reporting Services using JavaScript. I would normally just getElementById but the the id and name attributes for the drop down element are generated by the server so I don’t want to use that to reference the element. i.e. If the design of the page changes in the future it’ll name that elements _ct105 or _ct107

The only thing I specify on the page is the label ‘Business Period.’ I was thinking of using xpath to reference that span then use a relative location to the next select element but I can’t figure out how to do that.

Ideally, I’d be able to specify the id or name (or any other attribute) of the Select element itself. Is this possible?

I’ll be using jQuery on the page so if anyone can think of a good way to find it that way it’d be great.

<tr IsParameterRow='true'> <td class='ParamLabelCell'>     <span>Business Period</span> </td> <td class='ParamEntryCell' style='padding-right:0px;'>     <div>         <select name='ctl140$ctl00$ctl03$ddValue' id='ctl140_ctl00_ctl03_ddValue'> <!-- This is the select box I want -->             <option value='0'>&lt;Select&nbsp;a&nbsp;Value&gt;</option>             <option value='1'>Customer</option>             <option value='2'>Previous&nbsp;Week</option>             <option value='3'>Current&nbsp;Week</option>             <option value='4'>Next&nbsp;Week</option>         </select>     </div> </td> 

Answer 1

If you’re already using jQuery then XPath is going to be overkill. I see a few different approaches to get at it in jQuery. jQuery uses CSS selectors, so that’s how these all work:

/* this attaches to selectboxes, which are in a div,  * which is in a [TD] with class ParamEntryCell  */  $('td.ParamEntryCell div select');  /* selects a selectbox whose id attribute starts with 'ctl'   * in an element with class ParamEntryCell    */  $('.ParamEntryCell select[name^='ctl']')  $('td.ParamEntryCell div select');  /* selects a selectbox whose id attribute starts with 'ctl'   * in an element with class ParamEntryCell    */  $('.ParamEntryCell select[id^='ctl']') 

Then to use one of these you would simply use jQuery’s build in methods:

$('.ParamEntryCell select[id^='ctl']').change(function(){     var val = $(this).val();     alert(val); })