<SELECT> default option that disappears

Default value in Select list

[Dave_J]

I have a need to build a select list that displays a default option like 'Select a city' and when the user clicks that option, it disappears and is not one of the available choices. The user would then see a selection of (for example) Atlanta, Boston, Chicago, Denver, Fargo, Helena, etc.)

Does anyone have a hint of how to accomplish this?

Thanks

[Sanenet]

Check out a js source page like javascript.internet.com

[encyclo]

Welcome to WebmasterWorld, Dave_J!

I don't have a complete answer to your problem (OK, so I haven't got it working yet!), but you will need to use Javascript to accomplish what you want. I would try adding an

id

to the

option

like this:

<form action="">
<select name="select">
<option value="" [b]id="choose"[/b]>Choose a city</option>
<option value="ny">New York</option>
<option value="bt">Boston</option>
<option value="at">Atlanta</option>
</select>
</form>

Then try using

getElementById

to change the display value to none, perhaps as an onclick event on the

select

element.

Perhaps some of our Javascript gurus might have a better suggestion?

[kaled]

Here's some code I wrote a while back to initialize a form from url parameters. The loadParam() function can be used in isolation.

Kaled.

// Fills a form with parameters passed by url. 
// The standard format is //..../page.html?name1=value1&name2=value2 
// Parameters that are not recognised are ignored. 
// Parameter names must correspond with element names in the form. 
// Names are NOT case sensitive. 
// Values are not case sensitive but case is preserved for text fields. 
// To set or clear a checkbox, use name=1 or name=0 respectively. 
// To set a radiogroup value, use name=value where value is the value of the button to be checked. 
function loadParam(f,p) // f is a form, p is a string : 'name=value' 
{ var pa = p.split('='); if (pa.length < 2) return false; 
 var n = pa[0].toLowerCase(); 
 var v = pa[1].toLowerCase(); 
 with (f) { 
 for (var i = 0; i < length; i++) with (elements[i]) { 
 if (n == name.toLowerCase()) { 
 var tp = type.toLowerCase(); 
 if (tp == 'select-one') { 
  for (var j = 0; j < length; j++) if (options[j].text.toLowerCase() == v) { 
  selectedIndex = j; 
  break; 
}} 
 else if ((tp == 'radio') && (value.toLowerCase() == v)) checked = true 
 else if (tp == 'checkbox') checked = ((v!= '') && (v.charAt(0)!= '0')) 
 else value = pa[1] 
 }} 
}} 
function loadParams(f) // f is a form 
{ var tmp = unescape(document.location.search); if (tmp.charAt(0) == '?') tmp = tmp.substring(1); 
 if ((typeof(f) == 'undefined') ¦¦ (tmp == '')) return false; 
  
 tmp = tmp.split('&'); for (var i = 0; i < tmp.length; i++) loadParam(f,tmp[i]);  
} 
loadParams(document.forms[0]); 

[willem_I]

You can try to do this in php also.
The example below can be used with longer select lists of course, but also with values to be selected from a datafile you choose.
Hope this helps you solve your problem.

<select name="gender_info">
<?php
$selected="";
if($_POST['gender_info']=="Mr.")
$selected="SELECTED";
echo "<option value=\"Mr.\"" . selected . ">";
echo "mr.";
echo "</option>\n";

$selected="";
if($_POST['gender_info']=="Mrs.")
$selected="SELECTED";
echo "<option value=\"Mrs.\"" . $selected . ">";
echo "mrs.";
echo "</option>\n";
?>
</select>

[willem_I]

Ooops, sorry, all this cutting and pasting...
Correction to my previous post:

echo "<option value=\"Mr.\"" . selected . ">";

should be

echo "<option value=\"Mr.\"" . $selected . ">";

[garann]

Will this work?

<select onfocus="this.options.remove(0);">