Javascript 通过多次单击使用JQuery复制HTML数据列表

我在网页上设计了一个数据列表。我想用JQuery填充这个数据列表。控制器执行查询并获取设施列表。然后将此列表传递给客户端。此数据列表可以显示所有设施。当用户单击此文本框时，设施将列在下拉列表中。但当用户多次单击时，数据列表中将出现重复项。这意味着，如果单击两次，结果将在datalist中显示两次

下面是MVC视图中的代码

数据列表：

    <input type="text" list="facility" autocomplete="on" name="Facility" id="facilities" />
    <datalist id="facility"></datalist>

JQuery代码：

       $(document).ready(function () {
            $('#facilities').click(function () {
                //alert("Clicked");
                var postData = $('#clientTxt').val();
                $.ajax({
                    type: "POST",
                    url: '@Url.Action("FacilityCheck", "PCA")',
                    data: { clientTxt: postData },
                    success: function (result) {
                        //successful
                        for (var i = 0; i < result.facilities.length; i++) {
                            //alert(JSON.stringify(result.facilities[i]));
                            var option = "<option value ='" + result.facilities[i] + "'>" + result.facilities[i] + "</option>";
                            //I want to add an if judgement to avoid duplicates here
                            //Like contains() method in JAVA.
                                $('#facility').append(option);

                        }
                    },
                    error: function (result) {
                        alert('Oh no :(');
                    }
                });
            });
        });

$（文档）.ready（函数（）{
$（“#设施”）。单击（功能（）{
//警报（“点击”）；
var postData=$（'#clientTxt'）.val（）；
$.ajax({
类型：“POST”，
url:'@url.Action（“FacilityCheck”、“PCA”），
数据：{clientTxt:postData}，
成功：功能（结果）{
//成功的
对于（变量i=0；i

多次单击后会复制图像：

---

所以，请给我一些建议。非常感谢！

简单地修改一下您的成功：

$('#facility').html('');
$('#facility').append(option);

在附加项目之前删除这些项目

您还可以使用空：

$('#facility').empty();

---

这是因为您使用的是jQuery

append（）

方法，而不是替换HTML。现在，您只是在每次迭代

result.facilities[i]

循环时添加（追加）到它，而不是替换内容

您最好将所有源代码添加到一个字符串中，并用新内容替换

$（'#facility'）

innerHTML

。您可以使用

$（'#facility'）.html（yourContentString）；

来执行此操作

希望这有帮助

例如

success: function (result) {
   var options = "";
   //successful
   for (var i = 0; i < result.facilities.length; i++) {
       var option = "<option value ='" + result.facilities[i] + "'>" + result.facilities[i] + "</option>";
       options = options + option;
   } //end of loop
   $('#facility').html(options); // replace the innerHTML of #facility with your new options string
},

成功：函数（结果）{
var期权=”；
//成功的
对于（变量i=0；i