change the value of <option> in a <select>

I'd like to change all the <option> text of a <SELECT> with the click of a button.

The onclick of this button would erase all the <option> already existing for a <Select> and assign new values

Ex :
<SELECT ID="Select1" NAME="Catalog">
<option value="1">Virginia</option>
<option value="2">Florida</option>
<option value="3">New York</option>
</SELECT>

By clicking a button, select1 would become :

<SELECT ID="Select1" NAME="Catalog">
<option value="1">California</option>
<option value="2">Ohio</option>
<option value="3">Texas</option>
<option value="4">Colorado</option>
</SELECT>

Thanks !
ouaouaronAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
garrethgConnect With a Mentor Commented:
Try this:

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--

var data= new Array("catalog1","catalog2");
data["catalog1"]= new Array("Virginia", "Florida", "New York");
data["catalog2"]= new Array("California", "Ohio", "Texas", "Colorado");
data["catalog1"]["Virginia"]= new Array();
data["catalog1"]["Virginia"][0]= 1;
data["catalog1"]["Florida"]= new Array();
data["catalog1"]["Florida"][0]= 2;
data["catalog1"]["New York"]= new Array();
data["catalog1"]["New York"][0]= 3;
data["catalog2"]["California"]= new Array();
data["catalog2"]["California"][0]= 1;
data["catalog2"]["Ohio"]= new Array();
data["catalog2"]["Ohio"][0]= 2;
data["catalog2"]["Texas"]= new Array();
data["catalog2"]["Texas"][0]= 3;
data["catalog2"]["Colorado"]= new Array();
data["catalog2"]["Colorado"][0]= 4;

function populateSelect(selectElement, arrayIndex) {
  var currentLength= selectElement.length;
  for (var i=currentLength; i >= 0; i--) {
    selectElement.options[i]= null;
  }
  for (var i=0; i < data[arrayIndex].length; i++) {
    selectElement.options[i]= new Option(data[arrayIndex][i], data[arrayIndex][data[arrayIndex][i]][0]);
  }
  selectElement.selectedIndex= 0;
}

//-->          
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<SELECT NAME="select1" onChange="alert(this.options[this.selectedIndex].value)">
<option value="1">Virginia</option>
<option value="2">Florida</option>
<option value="3">New York</option>
</SELECT>
<INPUT TYPE="button" VALUE="catalog1" onClick="populateSelect(this.form.select1, 'catalog1')">
<INPUT TYPE="button" VALUE="catalog2" onClick="populateSelect(this.form.select1, 'catalog2')">
</FORM>
</BODY>
</HTML>
0
 
oubelkasCommented:
This is pretty difficult, and I can say you already that there's no way you can change the options by itself, you must replace them or use some kinda other trick. I tried something here, but I don't think this is exactly what you want, you could check it out though :

<html>
<head>
<script language="JavaScript">
<!--
function changeSelect(){
  document.write("<SELECT ID='Select1' NAME='Catalog'>");
  document.write("<option value='1'>California</option>");
  document.write("<option value='2'>Ohio</option>");
  document.write("<option value='3'>Texas</option>");
  document.write("<option value='4'>Colorado</option>");
  document.write("</SELECT>");
}
// -->
</script>
</head>
 
<body>
<SELECT ID="Select1" NAME="Catalog">
<option value="1">Virginia</option>
<option value="2">Florida</option>
<option value="3">New York</option>
</SELECT>

<input type="button" value="change" onClick="changeSelect()">
</body>
</html>

Joseph
0
 
oubelkasCommented:
That might do the trick, but I haven't got that much time to work out such a program... :)

Joseph
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
ouaouaronAuthor Commented:
if i simplify a little bit i'll have :

<html>
<HEAD>
<script LANGUAGE="javascript">

function ChangeSelect(selectElement) {

selectElement.options[2]= null;
selectElement.options[1]= null;
selectElement.options[0]= null;
selectElement.options[0] = new Option("California");
selectElement.options[1] = new Option("Ohio");
selectElement.options[2] = new Option("Texas");
selectElement.options[3] = new Option("Colorado");
}

</script>

</HEAD>
<BODY>
<FORM>
<SELECT NAME="select1">
<option value="1">Virginia</option>
<option value="2">Florida</option>
<option value="3">New York</option>
</SELECT>
<INPUT TYPE="button" VALUE="catalog1" onClick="ChangeSelect(this.form.select1)">
</FORM>
</BODY>

</html>

it was the selectElement.options[0] = new Option   that i needed.

Thanks oubelkas for the answer and i thanks you both for your time !
0
 
ouaouaronAuthor Commented:
the last line of my last comment should read like this :

 Thanks garrethq for the answer and i thanks you both for your time !

:)
0
 
oubelkasCommented:
Mmmm, so maybe I deserve some credit too hahaha! :)

Joseph
0
All Courses

From novice to tech pro — start learning today.