Question

早上好，在我的代码中，我需要使用一个包含两个值的下拉列表，例如1和2。单击＃action-link 链接时，我会将相应的值文本附加到textarea中。（＃main-reply ）。我使用Jquery .change（）方法来确定所选值何时更改。可以正常工作，除非我多次切换选项，然后即使我只需要在文本区域中插入相应的值，它也会一次添加多个值。

这是我使用的代码的简单片段：

$("#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");
});

Answer 2

在大多数情况下，当您两次加载相同的js文件时，就会发生此问题。

当JS文件加载两次时，2个更改事件将附加到同一事件。因此动作将发生两次

检查您的代码，并确保未两次加载JS文件

如果未加载两次，但仍会以某种方式出现此问题，请使用以下代码

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

这将删除与更改事件相关的所有事件，然后添加功能

Answer 3

在代码中，将click事件添加到选项值2的每个change事件上，这也不是一个好方法。

您可以编写以下代码

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

$("#option").change(function() {
 // Just trigger click on change which handle other stuff
$("#action-link").trigger("click);
  // You can write use below code as well.
  // $("#action-link").click();

});

或者您可以使它非常简单，如下所示，它是动态的，而不管任何选项值如何，都会添加选定的选项值。

$("#action-link").click(function() {
   appendOptionValue($("#option").val()); 
});

$("#option").change(function() {
 appendOptionValue($("#option").val());
});

function appendOptionValue(optionValue){
     $("#main-reply").append(optionValue);
}

Answer 4

就这样：

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

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

Answer 5

这可能对您有帮助。使用text（）代替append

$(document).ready(function(){

        $('#action-link').click(function(event) {
            if($('#option').val()==1){
              $('#main-reply').text('one');
            }else{
             $('#main-reply').text('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>

.change（）同时添加两个值

5 个答案: