Question

I have the following snippet of a HTML select box:

<select id="Obj_cboscreen" class="menubarselect" name="page">
<option att="1stOption" value="0" selected="">abc</option>
<option att="2ndOption" value="1">def</option>

When I run the following pieces of code:

var attribute = $('#Obj_cboscreen :selected').attr('att');
var name = $('#Obj_cboscreen :selected').html();

I get 1stOption and abc (respectively).

When I change the select box to a different option, for example:

<select id="Obj_cboscreen" class="menubarselect" name="page">
<option att="1stOption" value="0">abc</option>
<option att="2ndOption" value="1" selected="">def</option>

I get the same results of the output before.

“1stOption and abc”

Now I noticed the selected=””. That doesn’t look right, I’ve looked around in the project and I’m unable to find where that is being produced, but it is rendering properly.

I’m wondering why the selected selector isn’t working properly?

Answer 1

The following code works for me –

var attribute = $('#Obj_cboscreen :selected').attr("att");
var name = $('#Obj_cboscreen :selected').html();

alert(attribute + name);

There are a couple of changes from your code.

attr(att) to attr("att")

$('#Obj_cboscreen:selected') to $('#Obj_cboscreen :selected')

The following jsfiddle shows the code working when the ‘selected’ attribute is added to the second option.

http://jsfiddle.net/ipr101/bjWt3/