JQuery Get user selected value from select list when using default select=y

Question

Hi I have a Select list liek so:

<select id=cardtype name=cardtype>
<option selected='y' value="debit-0.00-50.00">Debit1</option>
<option value="debit-0.00-50.00">Debit2</option>
<option value="debit-0.00-50.00">Debit3</option>
<option value="Credit-1.00-50.00">CreditCard</option>
</select>

i have been trying a various methods in JQuery to get the value of the user selected value: var card = $('#cardType').val(); var card = $('#cardType :selected').val(); etc etc

However they all just return the value of the default selected option:

 <option selected='y' value="debit-0.00-50.00">Debit1</option>

Does anyone know of a way to get the selected option value that the user selects rather than the default selected value?

EDIT to clarify the JQuery is run when a user hits a link like so:

<label for="paymentAmount">Amount (minimum payment <a class="minPay" href="">£<span id="dueFrom">50.00</span></a>) <span class="instructions"><span class="mandatory">*</span></span></label>

with the following jquery:

$("a.minPay").click(function(event) {
            event.preventDefault();
            $("#paymentAmount").val($("#dueFrom").html());
            var from = parseFloat($("#paymentAmount").val());
            var card = $('#cardType').val();
    });

This does not run when the user select an option in the select list.. and i want the value option not the text :)

Solution 1

Make sure you're getting it with the proper id and at the right time, this is the correct method:

$('#cardtype').val();

Note that the id is cardtype, not cardType, it is case sensitive. Also, you need to make sure you're running after that after the user has selected a value, for example:

$('#cardtype').change(function() {
  alert($(this).val());
});

You can test it out here. Also note that your attributes should always be quoted.

Solution 2

You need to make sure that your IDs are the same (your code and HTML have different cases);

$('#cardtype').val(); will get the selected value as shown here: http://jsfiddle.net/jonathon/8hvRa/

One other point is that all your debit card values are the same. val gets the value of the option, not the text.

Comments

[Arazmus]

hi thanks for the swift answer! :) however, the id is correct (i forgot to cap the 't' in the post) this function is run when the user clicks a link, not when the select list is changed.

[Arazmus]

Hi Jonathon, I am after the value of the option not the text, the html above is just an example, in the real application each option has different text and different values

[Arazmus]

Hi Nick, After using that yool (which is very nice :) ) I have foudn that my code works fine there.. however in my application it does not and i am wondering if its because the select list is dynamically generated via AJAX, although I cant see why that would make a difference..