Dynamically update SELECTED option in option list

Discussion in 'Javascript' started by Mark Kolber, Dec 31, 2004.

  1. Mark Kolber

    Mark Kolber Guest

    I did a little searching on this but couldn't find an answer...

    On my website, I have a section of stories
    (www.midlifeflight.com/stories) There are different stores on
    different pages that are selectable via a selection list.

    To avoid having to rewrite the list on each page, I moved it into a
    ..js file that produces it where called. Primary advantage is that when
    adding new pages, there only one option list to update.

    Here's the code:

    //

    function story_goto( menuform )
    {
    var baseurl = 'file:///D|/Webs/Midlife-DM1/Midlife-DM1/stories/' ;
    // var baseurl = 'http://www.midlifeflight.com/stories/' ;
    selecteditem = menuform.url.selectedIndex ;
    newurl = menuform.url.options[ selecteditem ].value ;
    if (newurl.length != 0) {
    location.href = baseurl + newurl ;
    }
    }

    // Create the form
    document.writeln('<form action="storylist" method="get">' );
    document.writeln('<select name="url"
    onchange="story_goto(this.form)">' );

    // Create the Options
    document.writeln('<OPTION VALUE="index.htm">--Choose a story
    --</OPTION>');
    document.writeln('<OPTION VALUE="maui.htm#start_story">Maui');
    document.writeln('<OPTION
    VALUE="columbia_river.htm#start_story">Columbia River & Mt Hood');
    document.writeln('<OPTION VALUE="comntn.htm#start_story">Flying the
    Colorado Rockies');
    document.writeln('<OPTION VALUE="oldfriend.htm#start_story">Visit To
    An Old Friend');
    document.writeln('<OPTION VALUE="socal.htm#start_story">SOCAL and
    Catalina Island');
    document.writeln('<OPTION VALUE="natchez.htm#start_story">Natchez,
    MS');
    document.writeln('<OPTION VALUE="alaska.htm#start_story">Alaskan
    Adventure');
    document.writeln('<OPTION VALUE="devyn.htm#start_story">Angel Flight:
    So Much for So Little');
    document.writeln('<OPTION VALUE="pagosa.htm#start_story">Pagosa
    Springs, CO');
    document.writeln('<OPTION VALUE="sfotour.htm#start_story">San
    Francisco Bay Tour');
    document.writeln('<OPTION VALUE="fear.htm#start_story">Fear of
    Flying');
    document.writeln('<OPTION VALUE="biggin.htm#start_story">English
    Channel Crossing');
    document.writeln('<OPTION VALUE="sts.htm#start_story">Sonoma Valley,
    CA');
    document.writeln('<OPTION VALUE="syf.htm#start_story">St Francis,
    KS');

    // Finish the form

    document.writeln( '</select>' );
    document.writeln( '</form>' );

    //

    Works great, except that on every page where rendered, the first
    option -- Select a Page -- appears as the default. When I was writing
    the lists individually for each page, I would make the option
    reflecting the current page the SELECTED option. So, for example, if
    you were viewing the "San Francisco Bay Tour" page "San Francisco Bay
    Tour" would also be the SELECTED option in the list.

    Is there a way to replicate this behavior while still retaining the
    efficiency or having only one place to create most of the list?

    Mark Kolber
    Denver, Colorado
    =======================
    email? Remove ".no.spam"
    Mark Kolber, Dec 31, 2004
    #1
    1. Advertising

  2. Mark Kolber wrote:


    > document.writeln('<form action="storylist" method="get">' );
    > document.writeln('<select name="url"
    > onchange="story_goto(this.form)">' );
    >
    > // Create the Options
    > document.writeln('<OPTION VALUE="index.htm">--Choose a story
    > --</OPTION>');
    > document.writeln('<OPTION VALUE="maui.htm#start_story">Maui');


    > Works great, except that on every page where rendered, the first
    > option -- Select a Page -- appears as the default. When I was writing
    > the lists individually for each page, I would make the option
    > reflecting the current page the SELECTED option. So, for example, if
    > you were viewing the "San Francisco Bay Tour" page "San Francisco Bay
    > Tour" would also be the SELECTED option in the list.


    With HTML you can use
    <option selected value="whatever">option</option>
    to have an option initially selected.
    So all you need to do is finding the right option and do
    document.write('<option selected value="whatever">option<\/option>');
    It seems you could find the right option by checking/comparing
    location.pathname
    If you need help on that let us know.

    And instead of document.writing the above as needed for one option you
    could also leave the document.write calls as they are and later loop
    through the options of the select, find the right one and set
    option.selected = true;

    --

    Martin Honnen
    http://JavaScript.FAQTs.com/
    Martin Honnen, Dec 31, 2004
    #2
    1. Advertising

  3. Mark Kolber

    Mark Kolber Guest

    On Fri, 31 Dec 2004 17:01:24 +0100, Martin Honnen <>
    wrote:

    >With HTML you can use
    > <option selected value="whatever">option</option>
    >to have an option initially selected.
    >So all you need to do is finding the right option and do
    > document.write('<option selected value="whatever">option<\/option>');
    >It seems you could find the right option by checking/comparing
    > location.pathname


    Doesn't that mean writing a separate set of code for each page? That's
    what I've been trying to avoid.


    >
    >And instead of document.writing the above as needed for one option you
    >could also leave the document.write calls as they are and later loop
    >through the options of the select, find the right one and set
    > option.selected = true;
    >


    Martin, that sounds like what I'm looking for. Perhaps as part of the
    code that says when is selected, go to the page, another line says
    that the same becomes the selected option.

    Some help on that one would be great!


    Mark Kolber
    Denver, Colorado
    =======================
    email? Remove ".no.spam"
    Mark Kolber, Dec 31, 2004
    #3
  4. Mark Kolber

    RobG Guest

    Mark Kolber wrote:
    [...]
    > Martin, that sounds like what I'm looking for. Perhaps as part of the
    > code that says when is selected, go to the page, another line says
    > that the same becomes the selected option.


    Set a value either in an HTML meta tag or maybe the page title that
    matches either the text or value of the option that should be selected.
    At the start of your script, get the value from the meta tag (or
    wherever you store it) and as you build the option list, compare it to
    the value of each option. When you reach the one that it matches, set
    it to 'selected'.

    If none match (say you mistyped something) then the list will just do
    the default.


    --
    Rob
    RobG, Jan 1, 2005
    #4
  5. Mark Kolber

    RobG Guest

    Mark Kolber wrote:
    [...]
    >>And instead of document.writing the above as needed for one option you
    >>could also leave the document.write calls as they are and later loop
    >>through the options of the select, find the right one and set
    >> option.selected = true;

    >
    > Martin, that sounds like what I'm looking for. Perhaps as part of the
    > code that says when is selected, go to the page, another line says
    > that the same becomes the selected option.
    >
    > Some help on that one would be great!
    >


    So here's a more dynamic way of doing it. It uses an array of the
    option value/text pairs. I had two arrays, but I think this way is
    easier to maintain. The valueText array contains:

    ['value0','text0','value1','text1',...]

    You just put the form and select into the page and the JS inserts the
    options. The option to be selected is found by matching text found in
    either a meta tag or the document title. I have implemented both so
    you can work out which you want. The document title is cleaner, but
    means the title must match the option text.

    This works in Firefox and Safari on Mac, but for some reason does not
    work in IE 5.2 - the option list seems to be built and all my debug
    shows it's working but the actual options never appear, although the
    empty drop-down does and it is sized as if there is text in there (if
    it were truly empty it would be only 1 or 2 characters wide). I even
    put in an alert to tell my how many options the select has and it comes
    up with the right number - 15. Hmmm...

    Anyhow, the issue with all these methods is that your form is utterly
    dependent on Javascript - anyone with JS disabled or not supported will
    just see a small, empty select box.



    <html><head>
    <title>Flying the Colorado Rockies</title>

    <meta name="selectText" content="St Francis, KS">

    <script type="text/javascript">

    function getSelectText() {
    var txt = document.title;
    // Uncomment to see the meta tag version work
    /*
    var mTags = document.getElementsByTagName('meta');
    for (i=0, ml=mTags.length; i<ml; i++) {
    if (mTags.name == "selectText") {
    var txt = mTags.content;
    }
    }
    */
    return txt;
    }

    function story_goto( menuform ) {
    var baseurl = 'file:///D|/Webs/Midlife-DM1/Midlife-DM1/stories/',
    selecteditem = menuform.url.selectedIndex,
    newurl = menuform.url.options[selecteditem].value;

    if (newurl.length != 0) {
    location.href = baseurl + newurl ;
    }
    }

    function buildStoryList() {

    // Array of the option values and text
    var valueText = [
    'index.htm','--Choose a story--',
    'maui.htm#start_story' , 'Maui',
    'columbia_river.htm#start_story' , 'Columbia River & Mt Hood',
    'comntn.htm#start_story' , 'Flying the Colorado Rockies',
    'oldfriend.htm#start_story' , 'Visit To An Old Friend',
    'socal.htm#start_story' , 'SOCAL and Catalina Island',
    'natchez.htm#start_story' , 'Natchez, MS',
    'alaska.htm#start_story' , 'Alaskan Adventure',
    'devyn.htm#start_story' , 'Angel Flight So Much for So Little',
    'pagosa.htm#start_story' , 'Pagosa Springs, CO',
    'sfotour.htm#start_story' , 'San Francisco Bay Tour',
    'fear.htm#start_story' , 'Fear of Flying',
    'biggin.htm#start_story' , 'English Channel Crossing',
    'sts.htm#start_story' , 'Sonoma Valley, CA',
    'syf.htm#start_story' , 'St Francis, KS'
    ];

    // Get the select text
    var selText = getSelectText();

    // Find the select to add the options to
    if (document.getElementById) {
    var oForm = document.getElementById('storyListForm');
    } else if (document.all) {
    var oForm = document.all['storyListForm'];
    } else {
    return false;
    }

    // We could have looked for the 'select' nodeName
    // or firstChild I've just used the name
    var oSel = oForm.elements['url'];

    // Build the options and add them to the select
    for (var i=0, len=valueText.length; i<len; i++) {
    var oOpt = document.createElement('OPTION');
    oOpt.value = valueText;

    // Increment i to get to the text
    i++;

    oOpt.text = valueText;

    // If option text matches the select text make it selected
    if (oOpt.text == selText) oOpt.selected = true;

    // Now append the option to the select
    oSel.appendChild(oOpt);
    }
    }
    </script>

    </head><body onload="buildStoryList();">
    <form action="storylist" method="get" id="storyListForm">
    <select name="url" id="url" onchange="story_goto(this.form);">
    </select>
    </form>
    </body>
    </html>


    The buildStoryList() function could be removed from the body onload and
    instead be called like this:

    <form action="storylist" method="get" id="storyListForm">
    <select name="url" id="url" onchange="story_goto(this.form);">
    <script type="text/javascript">
    buildStoryList();
    </script>
    </select>
    </form>

    Also, you could use gEBI/document.all on the select id and not the form
    id, or build the entire form with script...


    --
    Rob
    RobG, Jan 1, 2005
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Patrick Olurotimi Ige
    Replies:
    6
    Views:
    519
    =?Utf-8?B?TmljZW1hbg==?=
    Mar 11, 2005
  2. Dennis Marks
    Replies:
    1
    Views:
    3,391
    Nikita the Spider
    Sep 8, 2006
  3. John
    Replies:
    5
    Views:
    988
    dorayme
    Mar 1, 2010
  4. Serge Myrand

    Posting a selected option (drop down list)

    Serge Myrand, Jul 22, 2004, in forum: ASP General
    Replies:
    2
    Views:
    123
    Serge Myrand
    Jul 22, 2004
  5. Dennis Marks

    Reset Selected Item in Select Option List

    Dennis Marks, Sep 8, 2006, in forum: Javascript
    Replies:
    0
    Views:
    119
    Dennis Marks
    Sep 8, 2006
Loading...

Share This Page