select实现左右列表的添加和删除-js tutoriel-php.cn

Maison

interface Web

js tutoriel

select实现左右列表的添加和删除

巴扎黑

Dec 06, 2016 am 11:33 AM

html

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>下拉列表</title> 
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> 
<style type="text/css"> 
.centent{ 
float: left; 
width: 300px; 
height: 200px; 
} 
span{ 
background-color:yellow; 
} 
</style> 
<script type="text/javascript"> 
$(function(){ 
$("#add").click(function(){ 
/* //获取下拉框选中的选项 
$option=$("#s1 option:selected"); 
//删除下拉框选中的选项 
var $remove=$option.remove(); 
//将要删除的option追加给对方 
$remove.appendTo("#s2"); */
//删除和追加操作可以使用appendTo()方法直接完成 
$option=$("#s1 option:selected"); 
$option.appendTo("#s2"); 
}); 
//将全部的option追加给对方 
$("#add_all").click(function(){ 
//获取所有的option 
$option=$("#s1 option"); 
//追加给对方 
$option.appendTo("#s2"); 
}); 
//双击进行追加给对方 
$("#s1").dblclick(function(){ 
//获取双击选中的选项 
var $option=$("option:selected",this); 
//追加给对方 
$option.appendTo("#s2"); 
}); 
//选中删除到左边 
$("#del").click(function(){ 
$option=$("#s2 option:selected"); 
$option.appendTo("#s1"); 
}); 
//全部删除到左边 
$("#del_all").click(function(){ 
$option=$("#s2 option"); 
$option.appendTo("#s1"); 
}); 
//双击删除 
$("#s2").dblclick(function(){ 
$option=$("option:selected",this); 
$option.appendTo("#s1"); 
}); 
}); 
</script> 
</head> 
<body> 
<div class="centent"> 
<select multiple  id="s1" style="width:120px;height:160px;"> 
<option value="1">选项1</option> 
<option value="2">选项2</option> 
<option value="3">选项3</option> 
<option value="4">选项4</option> 
<option value="5">选项5</option> 
<option value="6">选项6</option> 
<option value="7">选项7</option> 
<option value="8">选项8</option> 
</select> 
<div> 
<span id="add">选中添加到右边&gt;&gt;</span><br> 
<span id="add_all">全部添加到右边&gt;&gt;</span> 
</div> 
</div> 
<div class="centent"> 
<select multiple  id="s2" style="width:120px;height:160px;"> 
 
</select> 
<div> 
<span id="del">&lt;&lt;选中删除到左边</span> <br> 
<span id="del_all">&lt;&lt;全部删除到左边</span> 
</div> 
</div> 
</body> 
</html>

Copier après la connexion

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

Générez AI Hentai gratuitement.

Afficher plus

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)

2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: Comment obtenir des graines géantes

1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Combien de temps faut-il pour battre Split Fiction?

4 Il y a quelques semaines By DDD

R.E.P.O. Enregistrer l'emplacement du fichier: où est-il et comment le protéger?

4 Il y a quelques semaines By DDD

Musée à deux points: toutes les expositions et où les trouver

1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Afficher plus

Outils chauds

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?

7378

Tutoriel Java

1628

Tutoriel CakePHP

1357

Tutoriel Laravel

1267

Tutoriel PHP

1216

Afficher plus

Related knowledge

Tableau imbriqué en HTML Sep 04, 2024 pm 04:49 PM

Ceci est un guide des tableaux imbriqués en HTML. Nous discutons ici de la façon de créer un tableau dans le tableau ainsi que des exemples respectifs.

Bordure de tableau en HTML Sep 04, 2024 pm 04:49 PM

Guide de la bordure de tableau en HTML. Nous discutons ici de plusieurs façons de définir une bordure de tableau avec des exemples de bordure de tableau en HTML.

Marge gauche HTML Sep 04, 2024 pm 04:48 PM

Guide de la marge HTML gauche. Nous discutons ici d'un bref aperçu de la marge gauche HTML et de ses exemples ainsi que de son implémentation de code.

Disposition du tableau HTML Sep 04, 2024 pm 04:54 PM

Guide de mise en page des tableaux HTML. Nous discutons ici des valeurs de la mise en page des tableaux HTML ainsi que des exemples et des résultats en détail.

Liste ordonnée HTML Sep 04, 2024 pm 04:43 PM

Guide de la liste ordonnée HTML. Ici, nous discutons également de l'introduction de la liste et des types HTML ordonnés ainsi que de leur exemple respectivement.

Comment analysez-vous et traitez-vous HTML / XML dans PHP? Feb 07, 2025 am 11:57 AM

Ce tutoriel montre comment traiter efficacement les documents XML à l'aide de PHP. XML (Language de balisage extensible) est un langage de balisage basé sur le texte polyvalent conçu à la fois pour la lisibilité humaine et l'analyse de la machine. Il est couramment utilisé pour le stockage de données et

Déplacer du texte en HTML Sep 04, 2024 pm 04:45 PM

Guide pour déplacer du texte en HTML. Nous discutons ici d'une introduction, du fonctionnement des balises de sélection avec la syntaxe et des exemples à implémenter.

Espace réservé d'entrée HTML Sep 04, 2024 pm 04:54 PM

Guide de l'espace réservé de saisie HTML. Nous discutons ici des exemples d'espace réservé d'entrée HTML ainsi que des codes et des sorties.

See all articles