jQuery get selected value from selectbox not working

Question

I am working on a Woocommerce (WordPress) project and my task is to get selected value from drop-down list when user click on button.

My HTML is:

<select name="attribute_taxonomy" id="attribute_taxonomy" class="attribute_taxonomy">
    <option value="">Custom product attribute</option>
    <option value="pa_bedroom">Bedroom</option>
    <option value="pa_bathroom">Bathroom</option>
</select>

<button type="button" class="button button-primary add_attribute">Add</button>

and jQuery code is:

$('.add_attribute').on('click', function () {
    var selected = $('#attribute_taxonomy option:selected');
    alert(selected.val());
});

Unfortunately I am getting blank alert box, not getting anything. But strange is when I create jsFiddle with same HTML & jQuery code I am getting right output.

Why I am not getting anything. Is there any alternate solution? I am not good with jQuery so I will thank-full if someone guide me to fix this issue.

My Sample > JSFIDDLE

Thanks.

What is happening instead? are you getting the alert atleast? Are you loading your page dynamically (via ajax)? — Venkata Krishna, Jan 18 '14 at 20:41
check your developer console (or firebug console) for any errors! — Saurabh Kumar, Jan 18 '14 at 20:42
@Krishna Yes I am getting alert box but not getting value. Just empty popup. No I am not using ajax. — lumos, Jan 18 '14 at 20:46
@Saurabh Hi I checked from console and I am getting this error: `Uncaught TypeError: object is not a function` at my code. — lumos, Jan 18 '14 at 20:48
@lumos you should fix that first(check for the file/line number). Error at a place can cause the code at other place to not work. — Saurabh Kumar, Jan 19 '14 at 16:42

score 2 · Answer 1 · answered Jan 18 '14 at 20:41

2

Simply use:

var selected = $('#attribute_taxonomy');
alert( selected.val() );

answered Jan 18 '14 at 20:41

hjpotter92

78,589
36
144
183

David Thomas · Answer 2 · 2014-01-18T21:08:16.787

You need to get the value of the select element, not its selected option:

$('.add_attribute').on('click', function () {
    var selected = $('#attribute_taxonomy');
    alert(selected.val());
});

JS Fiddle demo.

I'd also tend to prevent the user interacting with the button until a choice is made in the select element (using the disabled (Boolean) property) and then, once a choice is made, prevent the user from reselecting what appears to be an option label (note this is more complicated than it needs to be, a possibly improved approach will follow). First, the HTML:

<!-- select element unchanged -->

<button type="button" class="button button-primary add_attribute" disabled>Add</button>

jQuery:

$('#attribute_taxonomy').on('change', function(){
    // cache the $(this) jQuery object since we're potentially using it twice:
    var $this = $(this);
    // if there are no disabled options we run the following jQuery:
    if (!$this.find('option:disabled').length) {
        $this
        // find the option that has no value set:
        .find('option[value=""]')
        // set its 'disabled' property to true (to disable it)
        .prop('disabled', true)
        // go back to the original selector ($(this))
        .end()
        // move to the next element (if it's a button element):
        .next()
        // unset its 'disabled' property (to enable it):
        .prop('disabled',false);
    }
});
$('.add_attribute').on('click', function () {
    var selected = $('#attribute_taxonomy');
    alert(selected.val());
});

JS Fiddle demo.

A slightly better approach (to my mind) is to use HTML, and its elements, properly; using an optgroup to associate the relevant option elements, with a label attribute set to explain the contents of that group:

<select name="attribute_taxonomy" id="attribute_taxonomy" class="attribute_taxonomy">
    <optgroup label="Custom product attribute">
    <option value="pa_bedroom">Bedroom</option>
    <option value="pa_bathroom">Bathroom</option>
    </optgroup>
</select>

JS Fiddle demo.

This approach means that an option, with a value, is always set (though initially to a default unless one of those options is given a selected attribute), which means the button doesn't need to have its disabled property set/unset to prevent accidentally choosing an option without a value.

References:

HTML:
- Enabling and disabling form controls.
- <optgroup>.
jQuery:
- Attribute-equals ([attribute="value"]) selector.
- end().
- find().
- next().
- on().
- prop().
- val().

jQuery get selected value from selectbox not working

2 Answers2