By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,165 Members | 850 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,165 IT Pros & Developers. It's quick & easy.

Set select box option to be selected based upon a variable.

P: 8
I need to set an option from a select box to be selected based upon a value I am pulling from a database.

I cannot alter the code of the select box in this case, so I must use javascript to change it after the select box has loaded. There are several pages, some with several select boxes, that need this function. I would like one javascript function that will take take two variables (the form element and a value) and then set the correct option to be selected.

Here is an example of the code format for these select boxes. I can add id or value attributes to the options but this would be a very time consuming process as there are a large number that would need to be edited.

[HTML]
<select name="userans0" id="userans0">
<option></option>
<option>CR - Copy Recorded</option>
<option>CU - Copy Unrecorded</option>
<option>OU - Original unrecorded</option>
<option>OR - Original recorded</option>
<option>MI - Missing</option>
</select>
[/HTML]

Here is the javascript function I am trying to use, this is in the document header.

Expand|Select|Wrap|Line Numbers
  1. function selectValue(formElement, val)
  2.         {
  3.             for(i=0;i<formElement.length;i++)
  4.             {
  5.                 if(formElement.options[i].value==val)
  6.                 {
  7.                     formElement.selectedIndex=i
  8.                 }
  9.  
  10.             }    
  11.         }
  12.  
In this case the variables are the following:

formElement = document.testform.userans0
val = CU - Copy Unrecorded

And the code to call the function.
[HTML]
<script type="text/javascript" language="JavaScript">
selectValueA(formElement, val);
</script>
[/HTML]

I can't seem to get this to work.
Jan 17 '08 #1
Share this Question
Share on Google+
5 Replies


acoder
Expert Mod 15k+
P: 16,027
Use the "text" property instead since you haven't set the value attribute.
Jan 18 '08 #2

P: 8
Use the "text" property instead since you haven't set the value attribute.
Hmm, that did not seem to work either.

I also tried using value after adding the value attributes to the options.

[HTML]<option value="CR - Copy Recorded">CR - Copy Recorded</option>[/HTML]

That did not work either.
Jan 18 '08 #3

P: 8
I have also tried this method:

If I set IDs on the options like so:

[html]<option id="CR - Copy Recorded">CR - Copy Recorded</option>[/html]

This works:

Expand|Select|Wrap|Line Numbers
  1. function setSelectValue()
  2. {
  3. var curOption = document.getElementById("CR - Copy Recorded");
  4. curOption.selected = true;
  5. }
  6.  
But this does not:

Expand|Select|Wrap|Line Numbers
  1. function setSelectValue(val)
  2. {
  3. var curOption = document.getElementById(val);
  4. curOption.selected = true;
  5. }
  6.  
Jan 18 '08 #4

P: 8
I found a stupid mistake with my input, the last function I wrote works correctly although I will need to add id attributes to several pages. If anyone has additional input to get the original function to work that would be appreciated.
Jan 18 '08 #5

acoder
Expert Mod 15k+
P: 16,027
If you use the text property, it does work. Perhaps you're calling the wrong function, selectValueA instead of selectValue?
Jan 18 '08 #6

Post your reply

Sign in to post your reply or Sign up for a free account.