Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Dynamically update SELECTED option in option list

Reply
Thread Tools

Dynamically update SELECTED option in option list

 
 
Mark Kolber
Guest
Posts: n/a
 
      12-31-2004
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"
 
Reply With Quote
 
 
 
 
Martin Honnen
Guest
Posts: n/a
 
      12-31-2004


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/
 
Reply With Quote
 
 
 
 
Mark Kolber
Guest
Posts: n/a
 
      12-31-2004
On Fri, 31 Dec 2004 17:01:24 +0100, Martin Honnen <(E-Mail Removed)>
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 [i] is selected, go to the page, another line says
that the same [i] becomes the selected option.

Some help on that one would be great!


Mark Kolber
Denver, Colorado
=======================
email? Remove ".no.spam"
 
Reply With Quote
 
RobG
Guest
Posts: n/a
 
      01-01-2005
Mark Kolber wrote:
[...]
> Martin, that sounds like what I'm looking for. Perhaps as part of the
> code that says when [i] is selected, go to the page, another line says
> that the same [i] 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
 
Reply With Quote
 
RobG
Guest
Posts: n/a
 
      01-01-2005
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 [i] is selected, go to the page, another line says
> that the same [i] 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[i].name == "selectText") {
var txt = mTags[i].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[i];

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

oOpt.text = valueText[i];

// 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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
selected=selected in the center of option list John HTML 5 03-01-2010 08:30 PM
Reset Selected Item in Select Option List Dennis Marks HTML 1 09-08-2006 08:21 PM
Reset Selected Item in Select Option List Dennis Marks Javascript 0 09-08-2006 05:31 PM
How to determine whether the user has already selected an option from a multi select list Patrick Olurotimi Ige ASP .Net 6 03-11-2005 10:39 AM
Posting a selected option (drop down list) Serge Myrand ASP General 2 07-22-2004 07:44 PM



Advertisments