SitePoint Sponsor

User Tag List

Results 1 to 13 of 13

Hybrid View

  1. #1
    SitePoint Wizard Defender1's Avatar
    Join Date
    Apr 2001
    Location
    My Computer
    Posts
    2,808
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Dynamically Setting the selected option in a select box

    How would I use JS to select the <option> dynamically?

    Basically I have a class (java) that dynamically pulls a list from a database, puts it in <option> tags and spits it back to my jsp file, so I need to set which one is selected after they've been displayed, but need to do it without touching the html, cause i can't.

    This make sense?

    basically after the select is created i want to set the selected option.

    Thanks in advance.
    Defender's Designs
    I'm Getting Married!

    Not-so-patiently awaiting Harry Potter Book 7 *sigh*

  2. #2
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    document.forms['formName'].elements['elementName'].selectedIndex = someInteger;

    That make sense?
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  3. #3
    SitePoint Wizard Defender1's Avatar
    Join Date
    Apr 2001
    Location
    My Computer
    Posts
    2,808
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes indeedy, trying it now...
    Defender's Designs
    I'm Getting Married!

    Not-so-patiently awaiting Harry Potter Book 7 *sigh*

  4. #4
    SitePoint Wizard Defender1's Avatar
    Join Date
    Apr 2001
    Location
    My Computer
    Posts
    2,808
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hrm... bleh.
    I need to do it based on an alpha-numeric ID. (ex: A010)

    Can it match values?

    This is what the <option> looks like:
    Code:
    <option value="A0145">COMM: ERROR CORRECTION FACILITY</option>
    Defender's Designs
    I'm Getting Married!

    Not-so-patiently awaiting Harry Potter Book 7 *sigh*

  5. #5
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sure
    Code:
    function selectOptionByValue( elem, value )
    {
    var opt, i = 0;
    while( opt = elem.options[i++] )
    {
    if ( opt.value == value )
    {
    opt.selected = true;
    return;
    }
    }
    }
    Just pass it a reference to the select element, and the value
    Code:
    selectOptionByValue( document.forms['formName'].elements['elementName'], 'A0145' );
    Last edited by beetle; Oct 6, 2003 at 10:40.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  6. #6
    SitePoint Wizard Defender1's Avatar
    Join Date
    Apr 2001
    Location
    My Computer
    Posts
    2,808
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hrmm.. ok, that looks like what I want.
    But where would I call it?
    Last edited by Defender1; Oct 6, 2003 at 10:29.
    Defender's Designs
    I'm Getting Married!

    Not-so-patiently awaiting Harry Potter Book 7 *sigh*

  7. #7
    SitePoint Wizard Defender1's Avatar
    Join Date
    Apr 2001
    Location
    My Computer
    Posts
    2,808
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also, could i call it before the form etc?
    Defender's Designs
    I'm Getting Married!

    Not-so-patiently awaiting Harry Potter Book 7 *sigh*

  8. #8
    SitePoint Wizard Defender1's Avatar
    Join Date
    Apr 2001
    Location
    My Computer
    Posts
    2,808
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Bleh, sorry for the 3 replies, but I really have no idea how to call a JS function outside of an onClick, onLoad etc events.

    I just want to call this mid-page, since the page's content is dynamic and I'd get JS errors by calling it onLoad if the form/element didn't exist (which it won't half the time).
    Defender's Designs
    I'm Getting Married!

    Not-so-patiently awaiting Harry Potter Book 7 *sigh*

  9. #9
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To run it mid page, just insert a script element
    HTML Code:
    <script type="text/javascript">
    	selectOptionByValue( document.forms['[i]formName[/i]'].elements['[i]elementName[/i]'], '[font=Courier]A0145' [/font]);
    </script>
    And keep the function in the <head> or a linked .js file.

    Also, you could build fault tolerance and exception handling into the function, if you wanted.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  10. #10
    SitePoint Wizard Defender1's Avatar
    Join Date
    Apr 2001
    Location
    My Computer
    Posts
    2,808
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hrm... i get an error if i call it before the form is defined etc.
    So I guess i have to call it after the select and form?
    Defender's Designs
    I'm Getting Married!

    Not-so-patiently awaiting Harry Potter Book 7 *sigh*

  11. #11
    SitePoint Wizard Defender1's Avatar
    Join Date
    Apr 2001
    Location
    My Computer
    Posts
    2,808
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, it's working for 1 of them.
    But I get an error that A0371 is undefined, but here's the option for it in the list:
    Code:
    <option value="A0371">RAM: APP (APP NAME)</option>
    Defender's Designs
    I'm Getting Married!

    Not-so-patiently awaiting Harry Potter Book 7 *sigh*

  12. #12
    SitePoint Wizard Defender1's Avatar
    Join Date
    Apr 2001
    Location
    My Computer
    Posts
    2,808
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hrm... nevermind, I made a bad call (no pun intended [img]images/smilies/tongue.gif[/img])
    I was doing this:
    Code:
    <script type='text/javascript'>selectOptionByValue(document.forms['EditApp'].elements['RPTG_APPL_ID'], A0371); </script>
    // When i should've done this:
    <script type='text/javascript'>selectOptionByValue(document.forms['EditApp'].elements['RPTG_APPL_ID'], 'A0371'); </script>

    Thanks for your help beetle!
    Defender's Designs
    I'm Getting Married!

    Not-so-patiently awaiting Harry Potter Book 7 *sigh*

  13. #13
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hehe, ya, can't forget those string delimiters!

    You're welcome
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev





Bookmarks

Posting Permissions

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