Why can't I get this value from the next dropdown with jQuery?

Question

Hi there,

I am attempting to get the value of a dropdown menu. I have several on the page.

The way it works is there is a radio button before each dropdown and ideally, on selecting the radio button, we simply get the current value displayed on the next select -> option.

What I have so far is:

html:

<input type="radio" class="ticketOption" value="30.00" />
<select>
    <option value="1">1</option>
    <option value="2">2</option>
</select>

jquery:

$j(document).ready(function(){


$j('.ticketOption').click(function(){

 var price = $j(this).attr('value');

 var tickets = $j(this).next('select option:selected').text();

 alert(tickets);


});

})

Yet my alert is coming up blank? I'm not sure if I'm doing my next() correctly. It seems pretty straight forward but I seem to be like thomas edison when it comes to getting my light bulb working.

Any ideas?

Answer 1

That's because you're trying to go next() into a option tag, which your input doesn't have. So you need to modify it slightly:

var tickets = $j(this).next('select').find('option:selected').text();