2014-01-07 206 views
1

我有兩個多選列表。我正試圖實現這樣的功能,用戶可以從左側列表中添加或刪除項目到右側列表中。這裏是我的代碼多選擇列表添加/刪除jquery中的項目問題

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

一切工作正常,但我的問題是當我選擇任何項目從左側添加到右側,添加的項目沒有在右側列表中選擇。我也面臨同樣的問題,同時刪除。

預期結果:當過添加/刪除執行中,添加/刪除項目應該在名單

任何幫助選擇?

回答

4

我已識別問題並解決它。 您需要通過將其存儲在臨時變量中來維護選擇。

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

+0

雅它是工作,但只有當我加入項目。刪除時,它現在不選擇 –

+0

已編輯的答案檢查它。請參閱Jsiddle。它正在工作。 –

+0

現在工作:)感謝兄弟 –

0

我已經修改了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

相關問題