JS auto-selecting option from select dropdown.

@coldscooterJan 25.2010

Hi, I want to be able to post to a page, and one of the post values, auto selects one of the values in a drop-down box.

So say i post a value ‘Red’ from a field called ‘Colors’ to a form, I would like ‘Red’ to be automatically selected in the ‘Colors’ select dropdown list.

I am working with dropdown lists of many values, so need a way to automate this selection.

Thanks in advance.

to post a comment

JavaScript

@JMRKERJan 26.2010 — #Assuming I understand what you want to do (maybe an incorrect assumption)

try this as a solution: ?

<i>
 </i>&lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;Pass to Page&lt;/title&gt;
 &lt;script type="text/javascript"&gt;
 // For: http://www.webdeveloper.com/forum/showthread.php?t=223497
 
 function queryStr(ji) {
 var hu = window.location.search.substring(1);
 var gy = hu.split("&amp;");
 for (i=0;i&lt;gy.length;i++) {
 ft = gy[i].split("=");
 //    if (ft[0] == ji) { return ft[1]; }
 if (ft[0].toLowerCase() == ji.toLowerCase()) { return ft[1].toLowerCase(); }
 }
 return '';
 }
 
 function checkQueryString() {  // expand 'pass2page.html?color=blue' to set to blue
 var v1 = queryStr('color'); 
 var SI = 0;
 switch (v1) {
 case 'red' : 	SI = 1; break;
 case 'orange' : SI = 2; break;
 case 'yellow' : SI = 3; break;
 case 'green' : 	SI = 4; break;
 case 'blue' : 	SI = 5; break;
 case 'indigo' : SI = 6; break;
 case 'violet' : SI = 7; break;
 default : 		SI = 0; break;
 }
 document.getElementById('colorInfo').selectedIndex = SI;
 }
 
 onload = function() {
 checkQueryString();
 }
 
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;!-- Examples to call this page:  <br/>
 pass2page.html 			&lt;-- default is for user to select color
 pass2page.html?color=red
 pass2page.html?color=green
 pass2page.html?color=violet
 --&gt;
 
 &lt;select id="colorInfo"&gt;
 &lt;option value=""&gt;Select a color&lt;/option&gt;
 &lt;option value="red"&gt;Red &lt;/option&gt;
 &lt;option value="orange"&gt;Orange &lt;/option&gt;
 &lt;option value="yellow"&gt;Yellow &lt;/option&gt;
 &lt;option value="green"&gt;Green &lt;/option&gt;
 &lt;option value="blue"&gt;Blue &lt;/option&gt;
 &lt;option value="indigo"&gt;Indigo &lt;/option&gt;
 &lt;option value="violet"&gt;Violet &lt;/option&gt;
 &lt;/select&gt;
 
 &lt;/body&gt;
 &lt;/html&gt;

@coldscooterauthorJan 26.2010 — #Thanks for the response Jmrker. That answers my original question, but I should really have expanded what my problem is:

I have a series of pages that all collect form data from the user. I want the user to be able to skip back and forth between the pages and see their previously input data displaying in the forms.

As there are many fields and a lot of post data, i want the function to search through the post array as it arrives on each page and fill in the form fields that correspond, if it exists in the post array. I'm using PHP as well but think this belongs on the JS forum.

Cheers.

@JMRKERJan 26.2010 — #I only know two possible methods using JS only.

1. Write and Read to a cookie on your computer.

2. Read from (not sure you can write to) a file using AJAX methods.

But if you have access to PHP already, this might be a better solution.

Good Luck!

?

JS auto-selecting option from select dropdown.

3 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

JS auto-selecting option from select dropdown.

3 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

3 Comments(s) _↴

Also in #JavaScript _↴