Comment supprimer sélectivement une zone de liste avec jQuery

Comment supprimer sélectivement une zone de liste avec jQuery : Liez l'événement de clic d'un bouton dans la direction gauche. Lorsque vous cliquez sur le bouton, les éléments sélectionnés dans la zone de liste de droite seront ajoutés à la zone de liste de gauche. . Pour terminer l'opération de suppression, le code est [$(this).remove().appendTo(leftSel)].

L'environnement d'exploitation de ce tutoriel : système Windows7, version jquery3.2.1, ordinateur Dell G3.

Comment supprimer sélectivement les zones de liste avec jQuery :

Cet article utilisera des exemples pour expliquer le fonctionnement des zones de liste gauche et droite à l'aide de jQuery. Les principaux effets sont les suivants. suit :

1. Utilisez les boutons gauche et droit pour ajouter ou supprimer des éléments dans la zone de liste de droite.

2. Vous pouvez ajouter ou supprimer des éléments en double-cliquant sur les éléments dans les zones de liste des deux côtés.

3. Obtenez la valeur de l'option dans la zone de liste de droite. La page

<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>

se compose de deux zones de liste à gauche et à droite et d'éléments de boutons d'opération. Utilisez CSS pour contrôler les trois côte à côte.

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}

J'ai défini les deux zones de liste pour qu'elles flottent à gauche float:left, et j'ai également fait flotter les éléments du bouton d'opération vers la gauche, principalement pour organiser les trois horizontalement. Il convient de noter que lors du réglage du bouton de fonctionnement, j'ai utilisé une image d'arrière-plan. Cette image comprend des boutons avec des flèches gauche et droite, comme indiqué ci-dessous, puis j'ai utilisé background-position pour positionner l'image. Cette méthode est actuellement utilisée. sur de nombreux sites Web.

jQuery

Tout d'abord, liez l'événement de clic du bouton à droite Lorsque vous cliquez sur le bouton, l'élément sélectionné dans la zone de liste de gauche sera. be Ajoutez-le à la zone de liste de droite pour terminer l’opération d’ajout.

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

De même, liez l'événement de clic du bouton construit dans la direction gauche. Lorsque vous cliquez sur le bouton, les éléments sélectionnés dans la zone de liste de droite seront ajoutés à la zone de liste de gauche, complétant ainsi l'opération de suppression.

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

Ensuite, l'événement de sélection par double-clic doit être terminé. Lorsque l'élément est double-cliqué, l'élément est immédiatement supprimé de la zone de liste et ajouté à la zone de liste opposée.

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); 
    }); 
});

Le code ci-dessus est un peu excessif, mais il est très intuitif et facile à comprendre. Avec ces opérations, vous pouvez contrôler la valeur de la list box à votre guise.

Recommandations d'apprentissage gratuites associées : javascript(vidéo)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!