Using Jquery val() on a dropdown list

Question

Among other things I am trying to alert the selected value in the 'Amount' drop down box which is a list of numbers from 1 to 10. The list is generated and then inserted in to a div.

// generate the amount dropdown list
var dropdown = "<select name=\"amount\">";
for(var i=1; i <= MAX_PRINT; i++) {
    dropdown = dropdown + "<option>" + i + "</option>"
}
dropdown = dropdown + "</select>";

jQuery("#" + divId).html("<div>Amount: " + dropdown + "</div></div>");


var amount = 1;

jQuery(document).ready(function() {
    amount = jQuery("#amount").val();
    alert(amount);
});

My question is: Why does it produce 'undefined' when I alert the amount? I am expecting it to return the selected number

It alerts undefined because an element with ID amount does not exist. — Felix Kling
– Felix Kling, Commented Nov 19, 2012 at 5:08

Adam Rackis · Accepted Answer · 2012-11-19 05:11:18Z

5

Make sure you give your select an id—right now it just has a name. As a result, your jQuery('#amount') selector is not returning anything, which is why the alert is showing undefined.

var dropdown = "<select id='amount' name='amount'>";

edited Nov 19, 2012 at 5:11

answered Nov 19, 2012 at 5:03

Adam Rackis

83.5k57 gold badges281 silver badges402 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Felix Kling Over a year ago

The value attribute is not needed though.

Adam Rackis Over a year ago

@Felix - with no value .val() will by default return the text of the selected option?

rahul Over a year ago

@AdamRackis value attribute not needed it's working fine without this also here jsfiddle.net/wdtkf

Felix Kling Over a year ago

Yes, that's actually just how the DOM interface works (i.e. it's not a jQuery feature).

Felix Kling Over a year ago

Just a reference: w3.org/TR/1999/REC-html401-19991224/interact/…

rahul · Accepted Answer · 2012-11-19 05:04:54Z

3

you are using amount = jQuery("#amount").val(); for that you have to give your dropdown an id

var dropdown = "<select name=\"amount\" id=\"amount\">";

DEMO

answered Nov 19, 2012 at 5:04

rahul

7,6738 gold badges42 silver badges55 bronze badges

Comments

xkeshav · Accepted Answer · 2012-11-19 05:03:23Z

0

there are 2-3 Approach to get a selected value from <select>

answered Nov 19, 2012 at 5:03

xkeshav

54.2k47 gold badges183 silver badges256 bronze badges

1 Comment

xkeshav Over a year ago

Nothing! but above are just made for this kind of purpose. .val is parent at all :)

Jai · Accepted Answer · 2012-11-19 05:10:01Z

0

use this if this works for you:

 jQuery(document).ready(function() {
   var amount = jQuery("select[name='amount']").val();
    alert(amount);
});

answered Nov 19, 2012 at 5:10

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Comments

jww · Accepted Answer · 2014-07-27 09:35:03Z

0

The id is missing on your dropdown.

// Generate the amount dropdown list
var dropdown = "<select id="amount" name=\"amount\">";
for(var i=1; i <= MAX_PRINT; i++) {
    dropdown = dropdown + "<option>" + i + "</option>"
}
dropdown = dropdown + "</select>";

jQuery("#" + divId).html("<div>Amount: " + dropdown + "</div>/div>");

var amount = 1;

jQuery(document).ready(function() {
    amount = jQuery("#amount").val();
    alert(amount);
});

edited Jul 27, 2014 at 9:35

jww

104k107 gold badges453 silver badges975 bronze badges

answered Nov 19, 2012 at 5:06

Dilberted

1,17210 silver badges23 bronze badges

Collectives™ on Stack Overflow

Using Jquery val() on a dropdown list

5 Answers 5

5 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related