JQuery To Duplicate Form Select Menu Selection

Question

I have a simple form with 2 pull-down menus. What I can't figure out how to do is have a simple HTML link that will copy the selection from the first select menu to the second. The one caveat is that we don't set 'id' on our form input fields so I need the JQuery object selection to be done using the 'name' field instead. Here is the HTML for the form:

<form action="/form/update" name="update-form" method="POST"> 

<select name="menu1_selection"> 
<option value="">-</option> 
<option value="1">1</option> 
<option value="2">2</option> 
<option value="3">3</option> 
<option value="4">4</option> 
<option value="5">5</option> 
<option value="6">6</option> 
<option value="7">7</option> 
<option value="8">8</option> 
<option value="9">9</option> 
<option value="10">10</option> 
<option value="11">11</option> 
<option value="12">12</option> 
</select>

<select name="menu2_selection"> 
<option value="">-</option> 
<option value="1">1</option> 
<option value="2">2</option> 
<option value="3">3</option> 
<option value="4">4</option> 
<option value="5">5</option> 
<option value="6">6</option> 
<option value="7">7</option> 
<option value="8">8</option> 
<option value="9">9</option> 
<option value="10">10</option> 
<option value="11">11</option> 
<option value="12">12</option> 
</select>

<a href="#" onclick="return false;" class="copyMenu1">copy</a>

</form>

And here is the JQuery I'm currently using that doesn't work since it isn't able to select the value from the first menu correctly:

<script type="text/javascript"> 
  $(document).ready(function() {  
    $("a.copyMenu1").click(function(){
        $("input[name='menu1_selection']").val($("input[name='hmenu2_selection']").val());
    });
  });
</script>

I've tried about 100 different ways and still can't figure out the right way to select the value from the first menu and make the same selection from the second menu using the 'name' field selection. Thanks in advance for your help!

Answer 1

You need a <select> element selector instead, like this:

$(function() {  
  $("a.copyMenu1").click(function(){
    $("select[name='menu1_selection']").val($("select[name='menu2_selection']").val());
  });
});

Also there was an extra h on the menu2_selection selector that needs removing, you can test it here. If you meant to copy any style input, you may have been after the :input selector.

One note on the demo, like your code, this copies the second menu to the first, not the other way around, so make sure to set the second drop down, then click copy.