So entfernen Sie selektiv ein Listenfeld mit jQuery

So entfernen Sie selektiv ein Listenfeld mit jQuery: Binden Sie das Klickereignis einer Schaltfläche in die linke Richtung. Wenn auf die Schaltfläche geklickt wird, werden die im rechten Listenfeld ausgewählten Elemente zum linken Listenfeld hinzugefügt, wodurch das Entfernen abgeschlossen wird . Operation, der Code ist [$(this).remove().appendTo(leftSel)].

Die Betriebsumgebung dieses Tutorials: Windows7-System, JQuery3.2.1-Version, Dell G3-Computer.

So entfernen Sie Listenfelder selektiv mit jQuery:

In diesem Artikel wird anhand von Beispielen die Funktionsweise der Verwendung von jQuery zum Implementieren der linken und rechten Listenfelder erläutert:

1 Mit den linken und rechten Tasten können Sie das rechte Listenfeld öffnen oder Elemente entfernen.

2. Sie können Elemente hinzufügen oder entfernen, indem Sie auf beiden Seiten auf die Elemente doppelklicken.

3. Holen Sie sich den Optionswert in das rechte Listenfeld.

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

Die Seite besteht aus zwei Listenfeldern links und rechts sowie Bedienschaltflächenelementen. Verwenden Sie CSS, um die drei nebeneinander zu steuern.

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}

Ich habe die beiden Listenfelder so eingestellt, dass sie nach links schweben: float:left, und auch die Elemente der Bedienschaltflächen nach links schweben lassen, hauptsächlich um die drei horizontal anzuordnen. Es ist erwähnenswert, dass ich beim Festlegen der Bedientaste ein Hintergrundbild verwendet habe, wie unten gezeigt, und dann background-position verwendet habe, um die Position des Bildes zu lokalisieren Websites angewendet werden.

jQuery

Binden Sie zunächst das Klickereignis der Schaltfläche in die rechte Richtung. Wenn auf die Schaltfläche geklickt wird, werden die im linken Listenfeld ausgewählten Elemente zum rechten Listenfeld hinzugefügt, wodurch der Hinzufügungsvorgang abgeschlossen wird.

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

Binden Sie in ähnlicher Weise das Klickereignis der Schaltfläche in die linke Richtung. Wenn auf die Schaltfläche geklickt wird, werden die im rechten Listenfeld ausgewählten Elemente zum linken Listenfeld hinzugefügt, wodurch der Entfernungsvorgang abgeschlossen wird.

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

Als nächstes muss das Doppelklick-Auswahlereignis abgeschlossen werden. Wenn auf das Element doppelgeklickt wird, wird das Element sofort aus dem Listenfeld entfernt und dem gegenüberliegenden Listenfeld hinzugefügt.

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

Der obige Code ist etwas umfangreich, aber er ist sehr intuitiv und leicht zu verstehen. Mit diesen Vorgängen können Sie den Wert des Listenfelds nach Belieben steuern.

Verwandte kostenlose Lernempfehlungen: Javascript(Video)

Das obige ist der detaillierte Inhalt vonSo entfernen Sie selektiv ein Listenfeld mit jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!