jquery中的多选列表添加/删除项目问题答案

【问题标题】：Multi Select List Add/Remove Item issue in jqueryjquery中的多选列表添加/删除项目问题
【发布时间】：2014-01-07 12:28:26
【问题描述】：

我有两个多选列表。我正在尝试实现这样的功能，用户可以将项目从左侧列表添加或删除到右侧列表。这是我的代码

html --

<select id="distriList" name="distriList" multiple="multiple" style="width: 150px; height: 70px; margin: 0px 2px 0px 3px;">
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
        <option value="D">D</option>
</select>
<a href="javascript:void(0);" id="addPop">Add</a>
<a href="javascript:void(0);" id="removePop">Remove</a>
<select id="selectDistriList" name="selectDistriList" multiple="multiple" style="width: 150px; height: 70px; margin: 0px 2px 0px 3px;">
        <option value="E">E</option>
        <option value="F">F</option>
        <option value="G">G</option>
        <option value="H">H</option>
</select>

和 JS -

$('#addPop').click(function() {
    if ($('#distriList option:selected').val() != null) {
         $('#distriList option:selected').remove().appendTo('#selectDistriList');
         $("#distriList").attr('selectedIndex','-1').find("option:selected").removeAttr("selected");
         $("#selectDistriList").attr('selectedIndex', '-1').find("option:selected").removeAttr("selected");
 } else {
    alert("Before add please select any position.");
                                        }
});

$('#removePop').click(function() {
       if ($('#selectDistriList option:selected').val() != null) {
             $('#selectDistriList option:selected').remove().appendTo('#distriList');
             $("#selectDistriList").attr('selectedIndex',  '-1').find("option:selected").removeAttr("selected");
             $("#distriList").attr('selectedIndex', '-1').find("option:selected").removeAttr("selected");
             $("#distriList").attr('selectedIndex', '-1').addAttr("selected");
} else {
   alert("Before remove please select any position.");
}
});

也检查JSFiddle

一切正常，但我的问题是当我从左侧选择任何项目并将其添加到右侧时，添加的项目没有在右侧列表中被选中。我在删除时也面临同样的问题。

预期结果：添加/删除执行时，应在列表中选择添加/删除的项目

有什么帮助吗？？

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

我已经发现问题并解决了。您需要通过将其存储在临时变量中来维护选择。

jquery代码如下：

 $('#addPop').click(function () {
      if ($('#distriList option:selected').val() != null) {
          var tempSelect = $('#distriList option:selected').val();
          $('#distriList option:selected').remove().appendTo('#selectDistriList');
          $("#distriList").attr('selectedIndex', '-1').find("option:selected").removeAttr("selected");
          $("#selectDistriList").attr('selectedIndex', '-1').find("option:selected").removeAttr("selected");
          $("#selectDistriList").val(tempSelect);
          tempSelect = '';
      } else {
          alert("Before add please select any position.");
      }
  });

  $('#removePop').click(function () {
      if ($('#selectDistriList option:selected').val() != null) {
          var tempSelect = $('#selectDistriList option:selected').val();
          $('#selectDistriList option:selected').remove().appendTo('#distriList');
          $("#selectDistriList").attr('selectedIndex', '-1').find("option:selected").removeAttr("selected");
          $("#distriList").attr('selectedIndex', '-1').find("option:selected").removeAttr("selected");

          $("#distriList").val(tempSelect);
          tempSelect = '';
      } else {
          alert("Before remove please select any position.");
      }
  });

在此处查看演示：

JSFiddle

【讨论】：

是的，它正在工作，但只有当我添加项目时。在删除的时候，它没有选择

【解决方案2】：

我相信您必须使用 .prop() 而不是属性“selected”。在这里查看http://api.jquery.com/prop/

【讨论】：

【解决方案3】：

我已经修改了 JS 小提琴检查。

代码更改：

$('#addPop').click(function() {
        if ($('#distriList option:selected').val() != null) {
             $('#distriList option:selected').remove().appendTo('#selectDistriList');
$("#distriList").attr('selectedIndex','-1').find("option:selected").removeAttr("selected");

            $("#selectDistriList").attr('selectedIndex', '-1').find("option:selected").removeAttr("selected");

        }
    else if ($('#selectDistriList option:selected').val() != null)  {                                                                        
    $('#selectDistriList option:selected').remove().appendTo('#distriList');
$("#selectDistriList").attr('selectedIndex','-1').find("option:selected").removeAttr("selected");

            $("#distriList").attr('selectedIndex', '-1').find("option:selected").removeAttr("selected");



    }
    else {
        alert("Before add please select any position.");
                                            }
    });

$('#removePop').click(function() {
    if ($('#selectDistriList option:selected').val() != null) {
    $('#selectDistriList option:selected').remove().appendTo('#distriList');
$("#selectDistriList").attr('selectedIndex', '-1').find("option:selected").removeAttr("selected");
 $("#distriList").attr('selectedIndex', '-1').find("option:selected").removeAttr("selected");
$("#distriList").attr('selectedIndex', '-1').addAttr("selected");
                                            }
    else if($('#distriList option:selected').val() != null) {
    $('#selectDistriList option:selected').remove().appendTo('#selectDistriList');
$("#distriList").attr('selectedIndex', '-1').find("option:selected").removeAttr("selected");
 $("#selectDistriList").attr('selectedIndex', '-1').find("option:selected").removeAttr("selected");
        $("#selectDistriList").attr('selectedIndex', '-1').addAttr("selected");}    
    else {
                                                alert("Before remove please select any position.");
                                            }
                                        });

JS FIDDLE

【讨论】：