javascript - 根据导航菜单中的 url 更改下拉选项

Question

我的页面顶部有一个导航菜单。我有四个元素，如果我需要选择“element1”，则需要选择 element1 ，如果我从导航菜单中单击“option2”，则需要选择 option2 在我页面最后一部分的下拉框中，这就是它的样子，有人有想法吗？

<nav>
    <ul class="main_menu">
        <li><a href=".home">Home</a>
        </li>
        <li><a href=".contact_area">Element1</a>
        </li>
        <li><a href=".contact_area">Element2</a>
        </li>
        <li><a href=".contact_area">Element3</a>
        </li>
        <li><a href=".contact_area">Element4</a>
        </li>
    </ul>
</nav>
<div class="contact_area">
    <form>
        <label for="">Element type:
            <select>
                <option value="Element1">Element1</option>
                <option value="Element2">Element2</option>
                <option value="Element3">Element3</option>
                <option value="Element4">Element4</option>
            </select>
        </label>
    </form>
</div>

Answer 1

你只需要阅读 anchor 标签文本并在下拉列表中选择它

$(".main_menu a").on('click',function(e){
    $("select").val($(this).text())
	return false // to stop default action of href 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<nav>
    <ul class="main_menu">
        <li><a href=".home">Home</a>
        </li>
        <li><a href=".contact_area">Element1</a>
        </li>
        <li><a href=".contact_area">Element2</a>
        </li>
        <li><a href=".contact_area">Element3</a>
        </li>
        <li><a href=".contact_area">Element4</a>
        </li>
    </ul>
</nav>
<div class="contact_area">
    <form>
        <label for="">Element type:
            <select>
                <option value="Element1">Element1</option>
                <option value="Element2">Element2</option>
                <option value="Element3">Element3</option>
                <option value="Element4">Element4</option>
            </select>
        </label>
    </form>
</div>