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

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • kodt
    New Member
    • Jun 2007
    • 8

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

    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.

    Code:
    function selectValue(formElement, val)
    		{
    			for(i=0;i<formElement.length;i++)
    			{
    				if(formElement.options[i].value==val)
    				{
    					formElement.selectedIndex=i
    				}
    		
    			}	
    		}
    In this case the variables are the following:

    formElement = document.testfo rm.userans0
    val = CU - Copy Unrecorded

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

    I can't seem to get this to work.
  • acoder
    Recognized Expert MVP
    • Nov 2006
    • 16032

    #2
    Use the "text" property instead since you haven't set the value attribute.

    Comment

    • kodt
      New Member
      • Jun 2007
      • 8

      #3
      Originally posted by acoder
      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.

      Comment

      • kodt
        New Member
        • Jun 2007
        • 8

        #4
        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:

        Code:
        function setSelectValue()
        {
        var curOption = document.getElementById("CR - Copy Recorded");
        curOption.selected = true;
        }
        But this does not:

        Code:
        function setSelectValue(val)
        {
        var curOption = document.getElementById(val);
        curOption.selected = true;
        }

        Comment

        • kodt
          New Member
          • Jun 2007
          • 8

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

          Comment

          • acoder
            Recognized Expert MVP
            • Nov 2006
            • 16032

            #6
            If you use the text property, it does work. Perhaps you're calling the wrong function, selectValueA instead of selectValue?

            Comment

            Working...