根据导航菜单中的网址更改下拉选项

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

你只需要阅读的锚标记文本，并选择在下拉

$(".main_menu a").on('click',function(e){ 
 
    $("select").val($(this).text()) 
 
\t 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>

Answer 2

try this 
$("a .contact_area").click(function(){ 
    $(".contact_area select:option[value='"+ $.trim($(this).text()) +"']").attr("selected","selected"); 
}); 

Answer 3

试试这个..，

$(function(){ 
    $('.main_menu li a').click(function(){ 
     var thisA = $(this).text(); 
     $('.contact_area option[value="+ thisA +"]').attr('selected','selected'); 
    }); 
});