根據導航菜單中的網址更改下拉選項

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'); 
    }); 
});