Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,700
    Thanks
    6
    Thanked 1,011 Times in 984 Posts

    check if “selected” attribute is set explicitly

    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:
    Code:
    <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
    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>');
    	$(this).children('option').first().attr('selected','selected');
    });

  • #2
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    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.

  • #3
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,373
    Thanks
    11
    Thanked 592 Times in 572 Posts
    use <optgroup> to label instead of a phantom <option>.

    that way, you can use :selected and stuff.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,700
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    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.

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    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:

    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($(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:


    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.

  • #6
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    So... the logic goes:

    Code:
    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.

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,700
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    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.

  • #8
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,342
    Thanks
    13
    Thanked 349 Times in 345 Posts
    Quote Originally Posted by VIPStephan View Post
    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.
    Last edited by Dormilich; 08-26-2010 at 03:04 PM.
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #9
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,373
    Thanks
    11
    Thanked 592 Times in 572 Posts
    Quote Originally Posted by VIPStephan View Post
    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...
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • #10
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    hack

    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.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •