How to set value of drop-down-menu with JavaScript?

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • Daniel1111
    New Member
    • Jun 2019
    • 31

    How to set value of drop-down-menu with JavaScript?

    Hi,

    I got a drop-down-menu with dynamically parameters. I have set a specific value in my JavaScript and I would like to change the shown value in the drop-down-menu to the value of my JavaScript when first open the html-file.

    So I do not want to make a new entry in my drop-down-menu as all needed entries are already available due to the dynamic drop-down-menu.

    What I wanna do is to compare my desired value in my JavaScript with the values of my drop-down-menu and if there is something identical then change the value of the drow-down-menu to that desired value.

    What I don't understand to solve that problem is:
    1. How can I read all the entries of a drop-down-menu and compare it with my value in JavaScript?
    2. How can I select one specific entry when I open the html-file?
  • gits
    Recognized Expert Moderator Expert
    • May 2007
    • 5388

    #2
    what have you tried so far? here are the ideas behind it:

    1: get a reference to the select-element that you want to test with and loop over the options to find out a match

    2: get a reference to the select-element where you want to set the value and set the selected attribute or use a setter for the value that the element provides

    Comment

    • Daniel1111
      New Member
      • Jun 2019
      • 31

      #3
      So what I have in my xslt:
      Code:
      <th rowspan="2">plane
      				<select id="modelRangeDropdown" onclick="JavaScript_Filter(this)">
         					 <option selected="selected">All</option>
         					 <xsl:for-each select="logstore/plane">
              				<option>
                 				 <xsl:value-of select="Name" />
            				    </option>
          			     </xsl:for-each>                    
      				</select>					
      			</th>
      And what I was trying to do was something like:
      Code:
      document.getElementById("modelRangeDropdown")[0].text;
      ... // But how to loop over the options?

      Comment

      • gits
        Recognized Expert Moderator Expert
        • May 2007
        • 5388

        #4
        looping could look like this:

        Code:
        var mySelectNode = document.getElementById("mySelect");
            
        for (var i = 0, l = mySelectNode.options.length; i < l; i++) {
                
            var opt = mySelectNode[i];
            console.log(opt.text);
        }

        Comment

        • Daniel1111
          New Member
          • Jun 2019
          • 31

          #5
          Thanks for you answer. That's great. Does there exist a function for selecting an entry of a drop-down-menu for JavaScript like selecting it with a computer mouse?

          Comment

          • Daniel1111
            New Member
            • Jun 2019
            • 31

            #6
            I have found the solution:
            Just use:
            Code:
            document.getElementById("modelRangeDropdown").selectedIndex = row_number_of_dropdown_value;

            Comment

            Working...