How to change two select> option dropdown in the same time [closed]

Question

I want that when I select an option from one dropdown,at the same time other dropdown value should change according to the first one.

For example: if I choose 'Value 1' from 'dropdown 1' , then in 'dropdown 2' it should change automatically to the same value('Value 1').

Can anyone help-me please? I thank you in advance!

Here is my Demo.

DEMO

<select name="" id="">
  <option value="">Select</option>
  <option value="">Value 1</option>
  <option value="">Value 2</option>
</select>

<select name="" id="">
   <option value="">Select</option>
   <option value="">Value 1</option>
   <option value="">Value 2</option>
</select>

Answer 1

First give identities to the selects

<select name="" id="one">
    <option value="">Select</option>
    <option value="1">Value 1</option>
    <option value="2">Value 2</option>
</select>
<select name="" id="two">
    <option value="">Select</option>
    <option value="1">Value 1</option>
    <option value="2">Value 2</option>
</select>

Then

jQuery(function ($) {
    var $set = $('#one, #two')
    $set.change(function () {
        $set.not(this).val(this.value)
    })
})

Demo: Fiddle

Answer 2

with pure javascript

<select name="test1" id="test1">
    <option value="0">Select</option>
    <option value="1">Value 1</option>
    <option value="2">Value 2</option>
</select>
<select name="test2" id="test2">
    <option value="0">Select</option>
    <option value="1">Value 1</option>
    <option value="2">Value 2</option>
</select>
<script>
document.getElementById('test1').addEventListener("change", function () {
    document.getElementById('test2').selectedIndex = document.getElementById('test1').selectedIndex;
}, false);
</script>

Fiddle here..