Question

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

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

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

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

任何帮助??

Answer 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.");
      }
  });

见Demo Here：

JSFiddle

Answer 2

我相信你必须使用.prop（）而不是'selected'属性。在这里查看http://api.jquery.com/prop/

Answer 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

多选列表在jquery中添加/删除项目问题

3 个答案: