473,287 Members | 1,800 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,287 software developers and data experts.

retain last select option value

What is the simplest way to retain the last option value selected in an
html select object using javascript?

I am currently using a server-side cgi language to accomplish this
task, but it adds a lot of overhead and I would like to move the
overhead to the remote client's PC, using javascript.

Thank you for your assistance.

Respectfully,
Gary

Dec 7 '05 #1
3 3316
AN************************@yahoo.com wrote:
What is the simplest way to retain the last option value selected in an
html select object using javascript?
What do you mean by 'retain'? Do you mean to have it selected on the
following page?

I am currently using a server-side cgi language to accomplish this
task, but it adds a lot of overhead and I would like to move the
overhead to the remote client's PC, using javascript.


You can't depend on JavaScript being available on the client, so if this
is important, continue the server-side support. However, you might be
able to design your page so that if javascript is available and has
support for suitable features, you can perhaps skip a trip to the server.

The selected option of a select element is given by the selectedIndex
property. Below is a trivial demo:

<script type="text/javascript">

function showSelected(sel)
{
if (sel && document.getElementById){
var msg = '';
var selIndex = sel.selectedIndex;
var selOption = sel.options[selIndex];
msg += 'Selected index: ' + selIndex
+ '<br>Value: ' + selOption.value
+ '<br>Text: ' + selOption.text;
document.getElementById('xx').innerHTML = msg;
}
}

</script>

<select onchange="showSelected(this);">
<option value="opt0">Option 0</option>
<option value="opt1">Option 1</option>
<option value="opt2">Option 2</option>
<option value="opt3">Option 3</option>
</select>
<br>
<span id="xx"></span>
If your question is how to have the same option selected on the
following page the best place to do that is on the server by setting the
appropriate option to 'selected' in the HTML. Then if the form is
reset, the correct option is still selected. If client-side script is
used to select the option, you have to accommodate reset and reloads, as
well as the back button.

Unless you can provide more detail, I think you should stick to your
current server solution.

[...]
--
Rob
Dec 7 '05 #2
Rob,

Thank you for your reply. By "retain," I do mean to have the last
option value selected on the following page. I realize that some users
will not have javascript enabled, but I am willing to risk this for the
sake of drastically decreasing the load time of the page. The select
object in question has about 1000 option, value pairs and preforming
the selected function server-side is taxing.

What would the javascript code for preforming the selected function
client-side look like?

Thank you for your assistance.

Respectfully,
Gary
RobG wrote:
AN************************@yahoo.com wrote:
What is the simplest way to retain the last option value selected in an
html select object using javascript?


What do you mean by 'retain'? Do you mean to have it selected on the
following page?

I am currently using a server-side cgi language to accomplish this
task, but it adds a lot of overhead and I would like to move the
overhead to the remote client's PC, using javascript.


You can't depend on JavaScript being available on the client, so if this
is important, continue the server-side support. However, you might be
able to design your page so that if javascript is available and has
support for suitable features, you can perhaps skip a trip to the server.

The selected option of a select element is given by the selectedIndex
property. Below is a trivial demo:

<script type="text/javascript">

function showSelected(sel)
{
if (sel && document.getElementById){
var msg = '';
var selIndex = sel.selectedIndex;
var selOption = sel.options[selIndex];
msg += 'Selected index: ' + selIndex
+ '<br>Value: ' + selOption.value
+ '<br>Text: ' + selOption.text;
document.getElementById('xx').innerHTML = msg;
}
}

</script>

<select onchange="showSelected(this);">
<option value="opt0">Option 0</option>
<option value="opt1">Option 1</option>
<option value="opt2">Option 2</option>
<option value="opt3">Option 3</option>
</select>
<br>
<span id="xx"></span>
If your question is how to have the same option selected on the
following page the best place to do that is on the server by setting the
appropriate option to 'selected' in the HTML. Then if the form is
reset, the correct option is still selected. If client-side script is
used to select the option, you have to accommodate reset and reloads, as
well as the back button.

Unless you can provide more detail, I think you should stick to your
current server solution.

[...]
--
Rob


Dec 7 '05 #3
AN************************@yahoo.com wrote:
Rob,

Thank you for your reply. By "retain," I do mean to have the last
option value selected on the following page. I realize that some users
will not have javascript enabled, but I am willing to risk this for the
sake of drastically decreasing the load time of the page. The select
object in question has about 1000 option, value pairs and preforming
the selected function server-side is taxing.

What would the javascript code for preforming the selected function
client-side look like?


Presumably the page is posting to itself. You could store data in a
cookie, but that is unreliable. Location.search may be better.

In the script below, a global object called 'KeepSet' has the names of
select elements that are to be kept set. The script looks through all
the control names in the search string and if a matching name is in
KeepSet, it uses the value to set the selected index. The index of the
option is appended to the value - if the value ends in a number,
separate the index by some non-digit character. You could add the
values on the server and trim them when you get them back.

Alternatively, pre-pend the index.

There are many variations on the theme, this probably won't suit but you
may want something like it. An alternative is to search through the
select's options to find a matching value and then set that as selected.
If you have lots of options, that may take some time...
<script type="text/javascript">

// Put the elements to be reset in here
var KeepSet = {
'sel-01':true,
'sel-02':true
};

function setOption()
{
// Get the search string
var searchString = location.search.substring(1);
var a, b, idx;

// If there is a search string
if (searchString.length) {

// Get the components
var a = searchString.split('&');

// For each component
for (var i=0, len=a.length; i<len; ++i){

// Get the control name and value
b = a[i].split('=');

// If a matching name is found in KeepSet
if (KeepSet[b[0]]){

// Get the index (trailing digits) from the value
idx = b[1].match(/\d+$/)[0];

// Set the select's selectedIndex to that value
document.forms['form-01'].elements[b[0]].selectedIndex = idx;
}
}
}
}

window.onload = setOption;

</script>

<form action="" name="form-01">
<select name="sel-01">
<option value="opt0">option 1-1</option>
<option value="opt1">option 1-2</option>
<option value="opt2">option 1-3</option>
</select>
<select name="sel-02">
<option value="opt 0">option 2-1</option>
<option value="some value 1">option 2-2</option>
<option value="3 value 67 2">option 2-3</option>
</select>
<select name="sel-03">
<option value="opt 0">option 3-1</option>
<option value="opt 1">option 3-2</option>
<option value="opt 2">option 3-3</option>
</select>
<input type="submit">
</form>




[...]
--
Rob
Dec 7 '05 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: JT | last post by:
I have an input form for which I've created a "matrix" for user input. Basically, the user chooses a radio button and then through javascript, a select box is displayed to define a value for that...
3
by: Mark R | last post by:
I have one .asp page with a SELECT pulldown list on it and some INPUT fields. When SUBMIT is clicked the form data is submitted to that same page and validated. If INPUT fields are empty the asp...
4
by: point | last post by:
Hello there... I'm a PHP programmer and starting to learn JS... I have a following problem.... I have 3 select boxes! one is hotel one is destination and one is country... if someone...
5
by: callmebill | last post by:
I'm relatively new to javascript, and I'm trying to decide whether the following (and if so, clues on how to do it): I'd like to create two HTML multiple-select boxes. The first would be a list...
7
by: smash2004 | last post by:
i have a select field with multiple enabled so user can select multiple options... is it possible to get option that was clicked last...i need this because i need to check if this option was...
6
by: Ian Davies | last post by:
Hi me again, sorry to be a pain. Ive been struggling with this one all day. Hope you can understand whats happening. First my script is below. Have a look and I'll explain at the bottom what it...
1
by: sahay | last post by:
Retain a visitor-specified value in a select option after page submition
1
SHOverine
by: SHOverine | last post by:
Recently my web host decided to "upgrade". This change rendered many of my pages useless and I am scrambling to fix the issues, so you may see several posts from me in the coming days. My first...
5
Claus Mygind
by: Claus Mygind | last post by:
I have a list box and want to limit the user to selecting a max of 5 items from the list. I've put in a counter which warns the user that more than 5 items have been selected, however I cannot...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...
0
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: marcoviolo | last post by:
Dear all, I would like to implement on my worksheet an vlookup dynamic , that consider a change of pivot excel via win32com, from an external excel (without open it) and save the new file into a...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.