为什么我无法从jQuery的下一个下拉列表中获得此值？

Question

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();