javascript - 如何获取所选值以显示下拉菜单

Question

我有一个效果很好的下拉菜单，更改页面的部分是否完美无缺。问题是当选定的页面被加载和显示时，我需要它在下拉菜单中显示选择的名称，因为它是事件页面。我有以下代码:

       <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>

有什么建议吗？

Answer 1

您将添加 selected="selected"所选页面的选项元素的属性。您可以在 jquery 中通过查找 <option> 来执行此操作使用您想要的元素的值(请注意，我假设 > 末尾的 values 是错字并已将其删除):

例如，假设我们要显示 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>