Question

我有一个带自动完成功能的文本框。当您开始在文本框中键入国家/地区名称时，下拉将自动匹配字符。所选国家/地区名称将自动显示在下一个div中，并从可用列表中删除。在conust中，您可以从选定列表中删除国家/地区，该列表将再次返回国家/地区名称。让我在技术上潜水一点。

我使用了两个数组变量availableAllTags和availableTags，它们分配了相同的值。在整个程序中，我没有在任何地方更改availableAllTags值。但令人惊讶的是，每当我从下拉列表中选择一个国家时，它就会从可用标签（完美）和可用的全部标签（令人惊讶）中删除。但我需要在我的程序中成为固定的availableAllTags数组值。

http://jsfiddle.net/aminulsumon/w73yr/11/

  var availableAllTags = availableTags; //original array which data not changed anywhere
  var selected_item_ids=new Array();
  var country;
  var i;
  $(function() {
    $( "#country_name" ).autocomplete({     
      source: availableTags,
      autoFocus: true,
      select: function( event, ui ) {              
           country=ui.item.value;  //$('#target').text( ui.item.value );
           $('#div_selected_country').html($('#div_selected_country').html()+"<span>"+country+
                " <a href='?delete="+country+"' class='del_country'>X</a></span>"+"\n ");
           //Add country id in selected_items array.
           alert(availableAllTags[0]);
           selected_item_ids.push(availableAllTags.indexOf(country));

           //Remove country name from availableTags array.
           i = availableAllTags.indexOf(country);
           availableTags.splice(i, 1);   //alert(availableTags[0]);
           if ( ui.item ){
              $(this).val('');
              return false;
           }
      }
    });
  });

  $(document).on('click','a.del_country', function(e) { 
    e.preventDefault();/* prevent browser opening href url*/

    //Select country name and delete from availableTags array
    var href_val = $(this).attr('href');
    var item_name = href_val.split('delete=')[1];    //alert(item_name);
    selected_item_ids.splice(selected_item_ids.indexOf(availableAllTags.indexOf(item_name)), 1);

    /* remove parent span*/
    $(this).parent().remove();
    return false;
  });

  $(document).on('click','#show_selected_item_ids', function(e) { 
    var all_ids;
    all_ids="";
    $.each(selected_item_ids, function(index,value) {   
     all_ids = all_ids+ selected_item_ids[index]+ ",";
    });
    all_ids = all_ids.substring(0,all_ids.length - 1); // remove last ";" added
    $("#div_selected_ids").html("ids: "+all_ids);
  });

  $(document).on('click','#btnSelectAll', function(e) {
    selected_item_ids = [];
    $('#div_selected_country').html("");
    $.each(availableTags, function(index,value) {   
      selected_item_ids.push(availableAllTags.indexOf(value));   
      $('#div_selected_country').html($('#div_selected_country').html()+"<span>"+value+
        " <a href='?delete="+country+"' class='del_country'>X</a></span>"+"\n ");
    });
  });

  $(document).on('click','#btnRemoveAll', function(e) {
    /*$.each(selected_item_ids, function(index,value) {   
      availableTags.push(availableAllTags.indexOf(value));
      selected_item_ids.splice(selected_item_ids.indexOf(availableAllTags.indexOf(value)), 1);
    });*/
    selected_item_ids = [];
    availableTags = availableAllTags;
    $('#div_selected_country').html("");
    $('#div_selected_ids').html("");
  });
});

Answer 1

如果我理解正确，你会想到这一行：

var availableAllTags = availableTags;

...创建availableTags数组的副本并将其放在availableAllTags变量中，但这不是JS数组（和其他JS对象）的工作方式。 该行的作用是创建对相同数组的第二个引用。

要创建阵列的副本，您可以使用.slice() method:

var availableAllTags = availableTags.slice(0);

然后在“全部删除”按钮单击处理程序中，您当前尝试通过执行availableTags = availableAllTags重置阵列，您可以再次使用.slice()制作副本：

availableTags = availableAllTags.slice(0);

Answer 2

不要使用var availableAllTags = availableTags;，请尝试以下操作：var availableAllTags = availableTags.slice();。

您当前的代码创建了一个新变量，该变量保存对同一数组的引用，而不是对其进行复制。

Answer 3

实际上是在javascript中，var x = y;表示将y的引用分配给x。所以为了赋值，你必须使用var x = y.slice（）;

Answer 4

您的数组示例正确分配值，但在IE8中几乎没有代码可以正常工作。看看小提琴（http://jsfiddle.net/aminulsumon/w73yr/14/）。你看到我开始写国家名称的时候会出现下拉菜单，但是当我选择一个国家时，下拉菜单会自动退出。

  $(function() {
    $( "#country_name" ).autocomplete({
      source: availableTags,
      autoFocus: true,
      select: function( event, ui ) {alert("control comes here");
           country=ui.item.value;  //$('#target').text( ui.item.value );
           $('#div_selected_country').html($('#div_selected_country').html()+"<span>"+country+
                " <a href='?delete="+country+"' class='del_country'>X</a></span>"+"\n ");
           //Add country id in selected_items array.
           selected_item_ids.push(availableAllTags.indexOf(country));

           //Remove country name from availableTags array.
           i = availableAllTags.indexOf(country);
           availableTags.splice(i, 1);   //alert(availableTags[0]);
           if ( ui.item ){
              $(this).val('');
              return false;
           }
      }
    });
  });

在上面的代码警报中（“控制来到这里”）;行没有与许多其他行一起执行。

为什么javascript数组项自动删除

4 个答案: