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>

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>

• javascript
• jquery

• You must be doing something else wrong, because it works: jsfiddle/aNQJY – Felix Kling Commented Jul 7, 2011 at 17:23
• 1 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 Commented Jul 7, 2011 at 17:27
• Mine script is a last loading. – NiLL Commented Jul 7, 2011 at 17:32
• 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 Commented Jul 7, 2011 at 17:36
• I've uses select just in .fancybox(), not after – NiLL Commented Jul 7, 2011 at 17:43

8 Answers 8

$('#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() 

Try this:

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

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/deYmN/

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.

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

It works fine here:

http://jsfiddle/ERfFA/

Use:

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

Source

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

Working example: http://jsfiddle/AKmHU/

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

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