Getting value in <select>, using JQuery

Question

I need to get a current value of SELECT tag. And for this I'm using $('select').val(), but this return only default value and it's don't changed. May be I can help me?

$('div#buy input').fancybox({
    ajax : {
        type    : "POST",
        data    : {
            id: $('input[name="id"]').val(),
            count: $('#count').val()
        }
    }
});

<select id="count">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>

You must be doing something else wrong, because it works: jsfiddle.net/aNQJY — Felix Kling
– Felix Kling, Commented Jul 7, 2011 at 17:23
The problem is that fancybox probably runs on page load, so the value is read on page load and then it is of course the default one. You have to read the value when it is changed. — Felix Kling
– Felix Kling, Commented Jul 7, 2011 at 17:27
I think you did not understand what I mean. When do you call $('div#buy input').fancybox(...)? Do you call it after the uses selects the value or before that ? — Felix Kling
– Felix Kling, Commented Jul 7, 2011 at 17:36

Vivek Goel · Accepted Answer · 2011-07-07 17:27:19Z

5

$('#count').val() will return current selected value. you are missing values for option.

<select id="count">
<option value="1">1</option>
<option value="2">2</option>........

Edit :

If you don't want to specify value in option than you can use.

$('#count :selected').val()

edited Jul 7, 2011 at 17:27

answered Jul 7, 2011 at 17:21

Vivek Goel

24.4k30 gold badges119 silver badges194 bronze badges

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

7 Comments

Felix Kling Over a year ago

You don't need the values. If the attribute is not set, the text is used as value.

Jamie Dixon Over a year ago

You're right that he can just use $('#count') however it's not because he's missing values for options. Values are optional.

Vivek Goel Over a year ago

@Felix Kling, Jamie Dixon . Thanks for clarification.

Felix Kling Over a year ago

$('#count').val() already works without any modifications. The problem is that this is executed on page load.

Vivek Goel Over a year ago

@Nill on domready selected will be default only . if you want to update your fancy box with selected value than attach a event on change. and than update your fancy box by getting $("count").val()

|

Mrchief · Accepted Answer · 2011-07-07 17:20:52Z

3

Try this:

$('select option:selected').val();

answered Jul 7, 2011 at 17:20

Mrchief

76.4k20 gold badges145 silver badges193 bronze badges

Comments

Jamie Dixon · Accepted Answer · 2011-07-07 17:25:43Z

3

You can do use the :selected selector on dropdowns to get the currently selected item:

var selectedValue = $('#count :selected').val()

UPDATE

Here's a quick fiddle of this working: http://jsfiddle.net/deYmN/

edited Jul 7, 2011 at 17:25

answered Jul 7, 2011 at 17:20

Jamie Dixon

54.1k21 gold badges131 silver badges168 bronze badges

4 Comments

FishBasketGordo Over a year ago

Your selector is a little off. It should be 'select :selected' (with a space between "select" and ":selected").

Felix Kling Over a year ago

This should not work. :selected only works for option elements.

Felix Kling Over a year ago

@JamieDixon: Well, before the edit of course ;) #count:selected will not work.

Jamie Dixon Over a year ago

Ah I see your point now Felix. Sorry. You're right. I missed the space initially. Good spot.

FishBasketGordo · Accepted Answer · 2011-07-07 17:42:33Z

2

In jQuery, $('#count').val() will give the currently selected value for the <select> element with id "count". I suspect that your code sample is running before the user has made a selection, and that's why you're getting the default value. You should set your count property sometime after the user has made a selection. Something like this will work:

var fancyboxOptions = {
    ajax : {
        type    : "POST",
        data    : {
            id: $('input[name="id"]').val(),
            count: $('#count').val()
        }
    }
}

$(document).ready(function() {
    $('div#buy input').fancybox(fancyboxOptions);
    $('#count').change(function() {
        fancyboxOptions.ajax.data.count = $('#count').val();
    });
});

This way, the options object will get updated when the selection is changed.

edited Jul 7, 2011 at 17:42

answered Jul 7, 2011 at 17:29

FishBasketGordo

23.2k4 gold badges60 silver badges92 bronze badges

3 Comments

NiLL Over a year ago

It's work, but just particual. AJAX sent only count value. Have any ideas about id?

FishBasketGordo Over a year ago

I'm sure it's having the same problem. You need to add a change event handler or some equivalent for it as well.

NiLL Over a year ago

Tnx for advice, I'm doing this now ^_^

switz · Accepted Answer · 2011-07-07 17:21:31Z

1

Are you running the fancybox/ajax before the user changes the select?

It works fine here:

http://jsfiddle.net/ERfFA/

answered Jul 7, 2011 at 17:21

switz

25.3k27 gold badges79 silver badges106 bronze badges

1 Comment

switz Over a year ago

Well when the script loads it picks up the first value (the default). You have to run the script after a user selects what he wants.

Jon Gauthier · Accepted Answer · 2011-07-07 17:21:32Z

1

Use:

$('select :selected').val()

Source

answered Jul 7, 2011 at 17:21

Jon Gauthier

25.7k6 gold badges66 silver badges69 bronze badges

Comments

Kevin Bowersox · Accepted Answer · 2011-07-07 17:21:40Z

1

$("#count option:selected").val();
//Use text to get the text presented on the ui
$("#count option:selected").text();

Working example: http://jsfiddle.net/AKmHU/

answered Jul 7, 2011 at 17:21

Kevin Bowersox

94.6k19 gold badges164 silver badges198 bronze badges

Comments

Ayyoudy · Accepted Answer · 2011-07-07 17:22:11Z

1

The id of your select is "count", so you need do something like this:

$('#count:selected').val()

answered Jul 7, 2011 at 17:22

Ayyoudy

3,73112 gold badges49 silver badges67 bronze badges

Collectives™ on Stack Overflow

Getting value in <select>, using JQuery

8 Answers 8

7 Comments

Comments

4 Comments

3 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

7 Comments

Comments

4 Comments

3 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related