jQuery check if “selected” attribute is set explicitly

[VIPStephan]

Here’s the situation: I am dynamically adding the label text that is assigned to a select element as first option inside that select while hiding the label. Now when something is selected and the form is submitted it doesn’t show the manually selected option (which has a selected attribute set explicitly then) but always shows the first dynamically added one as the JS is setting the selected attribute on it on DOM ready. I need to find a way to only add that attribute if nothing else has a selected attribute.

The problem is that one option is always selected implicitly (the one that is shown in the dropdown list on the page) so I can’t use the :selected selector as it will always return true, as well as the option[selected] selector. It seems like there is no way to find out if any option has a hard coded selected attribute, or is there?

My code looks like this:

<label for="select_id">Label text</label>
<select id="select_id">
	<option value="">Option 1</option>
	<option value="">Option 2</option>
	<option value="">Option 3</option>
</select>

and

$('select').each(function() {
	var id = $(this).attr('id');
	var label = $(this).siblings('label[for='+id+']').hide();
	var labelText = label.text();
	$(this).prepend('<option>'+labelText+'</option>');
	$(this).children('option').first().attr('selected','selected');
});

[Fumigator]

Would it be OK to start the select box out with nothing selected? You can do that via JS by setting the index to -1. If that's not an option, perhaps you can do the dorky "<select one>" option in the 0 position and default to that, then your logic can regard a selected 0 index as nothing selected.

[rnd me]

use <optgroup> to label instead of a phantom <option>.

that way, you can use :selected and stuff.

[VIPStephan]

Thanks for your prompt replies, guys.
rnd_me, I can’t use optgroup because this won’t show up in the default (collapsed) state of the select element, only if you actually open the drop down.
Fumigator, I haven’t quite understood what you mean but basically I am using the “select one” method, only that the initial option doesn’t read “select one” but “Label text”.

Maybe I didn’t quite express myself clearly, it’s confusing, I know. So, to rephrase my problem:

The precondition: I have a search form on a page that, when submitted, shows some search results and itself again.

The fact: If no option in a select has a selected attribute set then the first option in the list is always selected by default, right? This one is regarded as being selected by JavaScript, despite not having an explicit attribute. Now, when I dynamically prepend another option to that list (before the hard coded first option), it is not automatically the one that is shown by default because I’m adding it after the DOM has been established, and the originally selected first option stays being selected even if it becomes the second one now. This is why I’m setting the selected state of the new option to “selected”.

The problem: When someone makes a choice (e. g. option three) and submits the form, it would display the search results and the form again, and it’s supposed to display option three as selected (by setting a hard coded selected attribtue via PHP). However, as jQuery is prepending an option and setting its state to “selected” it actively removes the selected state from the third item. So I kinda need to find out if there is a hard coded selected attribute and don’t make the dynamically added item selected in that case. How would I do that?

I hope I haven’t scared you away now with my lengthy and complicated description. Unfortunately I can’t currently show you a working example.

[SB65]

Hi VIP Stephan

Interesting problem. If I've understood you correctly, if an option has previously been selected, then you're setting this as selected via PHP using selected="selected". And if this has been set, you still want to add the LabelText option, but not make it selected.

Playing around with this I couldn't find any way of detecting that the current selected item was the default or not - as you say, jQuery sees a selection, defualt or otherwise in the same way. So started looking for the selected attribute. I thought that this should work:

	$('select').each(function() {
	var id = $(this).attr('id');
	var label = $(this).siblings('label[for='+id+']').hide();
	var labelText = label.text();
	$(this).prepend('<option>'+labelText+'</option>');
        if($(this).children("option[selected='selected']").size()==0)
		{
	    $(this).children('option').first().attr('selected','selected');
		}
         });

but for reasons I don't understand the line highlighted in red fails to find option with selected='selected'. However, this rather clumsier approach does seem to work with some test code:

	$('select').each(function() {
	var id = $(this).attr('id');
	var label = $(this).siblings('label[for='+id+']').hide();
	var labelText = label.text();
	$(this).prepend('<option>'+labelText+'</option>');
	if($("#"+id+" option[selected='selected']").size()==0)
		{
	    $(this).children('option').first().attr('selected','selected');
		}
        });

Hope this might help even if it's not exactly what you want.

[Spudhead]

So... the logic goes:

if no submitted form value for field 
	
	write the select box,
	write the options in it,
	add option to selectbox, using selectbox's label text, and make it selected

else if submitted value

	write the select box,
	write the options in it,
	if one of the options has the same value as the submitted form value
		make that one selected

Is that about right? If so, and especially if you're sumbitting the page to itself, I'd do it all server side. Sorry, that's probably not the answer you needed.

[VIPStephan]

Well, lacking a satisfying solution I ended up putting the option into the HTML rather than adding it with JS. Apparently there is no way to check for the attribute, not for the state. Thanks for your thoughts, though.

[Dormilich]

Originally Posted by VIPStephan

Apparently there is no way to check for the attribute, not for the state. Thanks for your thoughts, though.

that’s due to the DOM, where every HTML element adheres to a given Interface. thus the DOM representation of the HTML element holds all possible attributes (resp. their JavaScript equivalents) with either the default values (as given in the DTD) or the values read from the source code. bear in mind that the document tree you work with in JavaScript is not a one-to-one representation of the HTML source code.

PS. in JS, there is no need to check for the attribute, the state suffices as the browser doesn’t render the source code, but the document tree.

[rnd me]

Originally Posted by VIPStephan

Well, lacking a satisfying solution I ended up putting the option into the HTML rather than adding it with JS. Apparently there is no way to check for the attribute, not for the state. Thanks for your thoughts, though.

you should be able to check the <select>'s selectedIndex instead of checking each option. you only need to check each option when the attrib "multiple" is used on the <select>.

also note that you can use option.getAttribute("selected") or even hasAttribute instead of option.selected to differentiate between the state and the attribs. Normally however, state and attribs are synced; but NOT ALWAYS!

finally, i think option.selected should be set to true, not sure how every browser handles a string setting...

[barchibald]

I've had the same need and you just can't get the dom to reliably differentiate. Here's what I did, works well....wouldn't advise if you've got lots of them as performance would be a problem:

$(yourselectbox).html().indexOf('selected')

this looks at the text that sits between your start and end select tags and if - somewhere in there - you have an item that is selected. From there you can work with the string "<" to figure out your index. (i only needed to know if SOMETHING was selected so I didn't have to do much parsing).

Hope that helps. It ain't pretty...but...it works. It'll return -1 if there is no "selected" item in your html.