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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    Senior Coder
    Join Date
    May 2004
    Posts
    1,457
    Thanks
    15
    Thanked 0 Times in 0 Posts

    change option selected

    how do I change the selected option

    I have

    <select name="scattributes" id="attop38" onChange='checkstock(38,39,2155);'>
    <option value=''>-First Select Color-</option>
    <option value=1993>N:Navy</option>
    <option value=1997>BK:Black</option>
    <option value=2200>O:Orchid</option>
    </select></span>
    <span id=span39><label>Size</label>
    <select name="scattributes" id="attop39" onChange='checkstock(39,,2155);'>
    <option value=''>-Next Select Size-</option>
    <option value=2151>AXXS:Adult XXS</option>
    <option value=2055>AXS:Adult XS</option>
    <option value=2010>AS:Adult S</option>
    <option value=2008>AM:Adult M</option>
    <option value=2006>AL:Adult L</option>
    <option value=2004>AXL:Adult XL</option>
    </select>


    I want in my function to for example say

    test("1993")

    and this should
    set the select box above to have the 1993 option selected

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,225
    Thanks
    23
    Thanked 606 Times in 605 Posts
    Code:
    <script type="text/javascript">
    document.getElementById("attop38").options[1].selected = true;
    </script>
    Place after the page loads

  • #3
    Senior Coder
    Join Date
    May 2004
    Posts
    1,457
    Thanks
    15
    Thanked 0 Times in 0 Posts
    is there anyway to access it instead of the number - by id or by value?

  • #4
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    document.getElementById("attop38").options[document.getElementById("attop38").selectedIndex].value;

    document.getElementById("attop38").options[document.getElementById("attop38").selectedIndex].text;
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,020
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    Quote Originally Posted by esthera View Post
    is there anyway to access it instead of the number - by id or by value?
    Yes, but clumsy:-

    Code:
    <select name="scattributes" id="attop38" onChange='checkstock(38,39,2155);'>
    <option value=''>-First Select Color-</option>
    <option value=1993>N:Navy</option>
    <option value=1997>BK:Black</option>
    <option value=2200>O:Orchid</option>
    </select>
    
    <script type = "text/javascript">
    var sel = document.getElementById("attop38");
    for (var i =0; i<sel.length; i++) {
    var val = sel[i].value;
    if (val == 1993) {
    sel.selectedIndex = i;
    }
    }
    
    alert ("The selected index is now " + sel.selectedIndex)
    
    </script>
    A select list option cannot have an id. Instead of the option value you could use the option text:-

    Code:
    var val = sel.options[i].text;
    if (val == "N:Navy") {
    I'm not paranoid! Which of my enemies told you this?
    Last edited by Philip M; 03-11-2013 at 04:00 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #6
    Senior Coder
    Join Date
    May 2004
    Posts
    1,457
    Thanks
    15
    Thanked 0 Times in 0 Posts
    I don't care what the current selected index is

    all I want to do is change the selected index

    so if i call the function with a 1993 it would select Navy as that is the id of 1993

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,567
    Thanks
    78
    Thanked 4,384 Times in 4,349 Posts
    Code:
    function test( setValue )
    {
        var sel = document.getElementById("attop38");
        for ( var i = 0; i < sel.options.length; ++i )
        {
            if ( sel.options[i].value == setValue ) 
            {
                sel.selectedIndex = i;
                return; // found it and done
            }
        }
        // no match...do nothing?
    }
    so if i call the function with a 1993 it would select Navy as that is the id of 1993
    No. "Navy" is the .text for the <option> with a .value of 1993. There is no id involved in this, except perhaps the id of the <select>. You are using the wrong terminology, which I guess confused the issue.
    Last edited by Old Pedant; 03-11-2013 at 07:14 PM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    Options don't have "ID".. text, value.. I think that's it.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #9
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,020
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    Quote Originally Posted by WolfShade View Post
    Options don't have "ID".. text, value.. I think that's it.
    Yes, I think that has been made clear already. Text, value and selectedIndex.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #10
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,225
    Thanks
    23
    Thanked 606 Times in 605 Posts
    Use this esthera:
    Code:
    <script type="text/javascript">
    x = document.getElementById("attop38").options.length;
    for(y=0; y<x; y++){
    	if(document.getElementById("attop38").options[y].value == '1993')
    		document.getElementById("attop38").options[y].selected = true;
    }
    </script>

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,567
    Thanks
    78
    Thanked 4,384 Times in 4,349 Posts
    Sunfighter:

    Aside from the fact that you keep repeating the code document.getElementById("attop38") instead of assigning it once to a local variable, how is that different that the code I showed?

    Oh...wait...I see...You set the <option>'s selected property to true whereas I changed the selectedIndex. So long as the <select> is not set to muliple, though, those are equivalent.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #12
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Code:
    function myFunc( v )
    {
      document.getElementById( "attop38" ).value = v;
    }

  • #13
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,567
    Thanks
    78
    Thanked 4,384 Times in 4,349 Posts
    At least some older browsers won't support that, LogicAli. (Older versions of FireFox didn't, for example, as I remember finding out the hard way.) Quite possibly (even probably) they are ones he doesn't care about, but...
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #14
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,225
    Thanks
    23
    Thanked 606 Times in 605 Posts
    Quote Originally Posted by Old Pedant View Post
    Sunfighter:

    Aside from the fact that you keep repeating the code document.getElementById("attop38") instead of assigning it once to a local variable, how is that different that the code I showed?

    Oh...wait...I see...You set the <option>'s selected property to true whereas I changed the selectedIndex. So long as the <select> is not set to muliple, though, those are equivalent.
    Sorry. Didn't read your code. When I got back to this thread it had a lot of posts that just looked above esthera's knowledge of js so just gave him code. Had I read it I would have said :

    Esthera, use Old Pedant's code in post #7.

    And yes we both had the same code. How often does that happen?

  • #15
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,567
    Thanks
    78
    Thanked 4,384 Times in 4,349 Posts
    Actually, seeing the difference between our two is instructive, I think. We were, indeed, almost the same. But knowing that you can either set the <option> to selected or set the selectedIndex to match the desired <option> is good to have in your coding arsenal. (And knowing that you must use selected if you want to set multiple <option>s in a <select multiple> is also good to know. And and and.. The more you know, the better.)
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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