javascript - .change() 同时添加两个值

Question

美好的一天，在我的代码中，我需要使用具有两个值的下拉列表，比如 1 和 2。当我单击 #action-link 链接时，我将值的相应文本附加到文本区域中(#main-reply)。我使用 Jquery .change() 方法来确定所选值何时更改。工作正常，除非我多次切换选项然后它开始一次添加多个值，即使我只需要在 textarea 中插入相应的值。

这是我使用的代码的一个简单片段:

$("#action-link").click(function() {
  if ($("#option").val() == 1) {
    $("#main-reply").append("One");
  }
});

$("#option").change(function() {
  if ($(this).val() == 2) {
    $("#action-link").click(function() {
      $("#main-reply").append("Two");
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="option"><option value='1' selected>One</option><option value='2'>Two</option></select>
<a href="#" id="action-link">Add Value to textarea</a>
<br>
<textarea id="main-reply"></textarea>

我该如何解决这个问题？谢谢!

Answer 1

当选项的值更改为“2”时，代码添加了另一个点击监听器 Link .因此，append() 语句被多次调用，每个监听器调用一次。

$("#action-link").click(function() {
  var option = $("#option").val();
  if (option == 1) $("#main-reply").append("One");
  else if(option == 2) $("#main-reply").append("Two");
});