retain last select option value

[Guest]

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

 

[RobG]

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.

[...]

 

[Guest]

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

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.

[...]

 

[RobG]

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












[...]