How to selectively remove a list box with jQuery

JQuery's method of selectively removing a list box: Bind the click event of a button to the left. When the button is clicked, the items selected in the right list box will be added to the left list box. To complete the removal operation, the code is [$(this).remove().appendTo(leftSel)].

The operating environment of this tutorial: windows7 system, jquery3.2.1 version, Dell G3 computer.

How to selectively remove list boxes with jQuery:

This article will use examples to explain the operation of using jQuery to implement the left and right list boxes. The main effects are as follows:

1. Use the left and right buttons to add or remove items to the right list box.

2. You can add or remove items by double-clicking the items in the list boxes on both sides.

3. Get the option value in the list box on the right.

<div class="select_side"> 
   <p>待选区</p> 
   <select id="selectL" name="selectL" multiple="multiple"> 
      <option value="13800138000">王新安 - 13800138000</option> 
      <option value="13800138001">李密 - 13800138001</option> 
      <option value="13800138002">姜瑜 - 13800138002</option> 
      <option value="13800138002">钱书记 - 13800138004</option> 
   </select> 
</div> 
<div class="select_opt"> 
   <p id="toright" title="添加">></p> 
   <p id="toleft" title="移除"><</p> 
</div> 
<div class="select_side"> 
   <p>已选区</p> 
   <select id="selectR" name="selectR" multiple="multiple"> 
   </select> 
</div> 
<div class="sub_btn"><input type="button" id="sub" value="getValue" /></div>

The page consists of two left and right list boxes and operation button items. Use CSS to control the three side by side.

CSS

.select_side{float:left; width:200px} 
select{width:180px; height:120px} 
.select_opt{float:left; width:40px; height:100%; margin-top:36px} 
.select_opt p{width:26px; height:26px; margin-top:6px; background:url(arr.gif) no-repeat; 
 cursor:pointer; text-indent:-999em} 
.select_opt p#toright{background-position:2px 0} 
.select_opt p#toleft{background-position:2px -22px}

I set both list boxes to float left float:left, and also floated the operation button items left, mainly to arrange the three horizontally. It is worth noting that when setting the operation button, I used a background image. This image included buttons with left and right arrows, as shown below, and then used background-position to position the image. , this method has been applied in many websites.

jQuery

First, bind the click event of the button to the right. When the button is clicked, the item selected in the left list box will be Add it to the list box on the right to complete the adding operation.

var leftSel = $("#selectL"); 
var rightSel = $("#selectR"); 
$("#toright").bind("click",function(){       
    leftSel.find("option:selected").each(function(){ 
        $(this).remove().appendTo(rightSel); 
    }); 
});

Similarly, bind the click event of the button built in the left direction. When the button is clicked, the items selected in the right list box will be added to the left list box, completing the removal operation.

$("#toleft").bind("click",function(){        
    rightSel.find("option:selected").each(function(){ 
        $(this).remove().appendTo(leftSel); 
    }); 
});

Next, the double-click selection event needs to be completed. When the item is double-clicked, the item is immediately removed from the list box and added to the opposite list box.

leftSel.dblclick(function(){ 
    $(this).find("option:selected").each(function(){ 
        $(this).remove().appendTo(rightSel); 
    }); 
}); 
rightSel.dblclick(function(){ 
    $(this).find("option:selected").each(function(){ 
        $(this).remove().appendTo(leftSel); 
    }); 
});

The above code is a bit much, but it is very intuitive and easy to understand. With these operations, you can control the value of the list box as you like.

Related free learning recommendations: javascript(Video)

The above is the detailed content of How to selectively remove a list box with jQuery. For more information, please follow other related articles on the PHP Chinese website!