Dynamically update SELECTED option in option list

M

Mark Kolber

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"
 
M

Martin Honnen

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;
 
M

Mark Kolber

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"
 
R

RobG

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.
 
R

RobG

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

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top