JQuery 复制表单选择菜单选择

Question

我有一个带有 2 个下拉菜单的简单表单。我不知道该怎么做，就是有一个简单的 HTML 链接，可以将第一个选择菜单中的选择复制到第二个选择菜单。需要注意的是，我们没有在表单输入字段上设置“id”，因此我需要使用“name”字段来完成 JQuery 对象选择。这是表单的 HTML：

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

这是我当前使用的 JQuery，它不起作用，因为它无法正确从第一个菜单中选择值：

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

我已经尝试了大约 100 种不同的方法，但仍然可以无法找出从第一个菜单中选择值并使用“名称”字段选择从第二个菜单中进行相同选择的正确方法。预先感谢您的帮助！

Answer 1

您需要一个 元素选择器，例如this：

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

menu2_selection 选择器上还有一个额外的 h 需要删除，您可以在这里测试。如果您打算复制任何样式输入，您可能已经在<代码>：输入选择器。

关于演示的一个注释，就像您的代码一样，这会将第二个菜单复制到第一个菜单，而不是相反，因此请确保设置第二个下拉列表，然后单击“复制”。