Changing the Drop-down option based on the url from navigation menu

I have a navigation menu on the top of my page. I am having four elements, in that if i need to select 'element1' it need to select the element1 , if I click 'option2' from navigation menu, it need to select option2 in the drop down box at last section of my page, This is how it look like, anyone have ideas?

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

Answers


You Just need to read anchor tag text and make selected that in drop-down

$(".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>

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

Try this..,

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

Need Your Help

PHP/HTML table with separate columns

php html mysql

I am trying to build a table in PHP/HTML where the data is being pulled from a db and being displayed on the website...my only problem is I want each column to be separate and have its own search