How to Get Selected Value to show for DropDown Menu

Question

I have a dropdown menu that works great, does the changing pages part flawlessly. The problem is when the selected page is loaded and displayed, I need it to show the selection's name in the drop down menu as it is the active page. I have the following code:

       <div class="about-navDropWrapper">
            <select onchange="location = this.options[this.selectedIndex].value;">
                <?php 
                            if ( get_field('games_nav_drop_down_link', 'option') ):
                                while( has_sub_field('games_nav_drop_down_link', 'option') ) :
                        ?>
                        <option value="<?php echo get_sub_field('games_nav_drop_down_link_one', 'option'); ?>"><?php echo get_sub_field('games_nav_drop_down_name', 'option'); ?></option>
                        <?php 
                            endwhile;
                            endif;
                        ?>
            </select>
        </div>

Any suggestions?

Answer 1

You would add selected="selected" attributes to the option element for your selected page. You can do this in jquery by find the <option> with the value of the element you want ( note I'm assuming that the > at the end of your values was a typo and removed it ):

So for example assuming we want to show page3.html .

 var selected = "page3.html"; // Would be replaced with the page by location $("#selectItem option[value='"+selected+"']").attr("selected", "selected"); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="about-navDropWrapper"> <select id="selectItem"> <option value="page1.html">Page 1</option> <option value="page2.html">Page 2</option> <option value="page3.html">Page 3</option> <option value="page4.html">Page 4</option> </select> </div> 

Answer 2

Please try this:

 <script>
        onload = function () {

            var thisPage = location.pathname.replace("/", "");

            document.getElementsByTagName("select")[0].value = thisPage;
        }
    </script>