recherche

Maison >interface Web >js tutoriel >JS liste de gauche transfert vers la droite

JS liste de gauche transfert vers la droite

php中世界最好的语言
php中世界最好的语言original
2018-05-03 09:56:441567parcourir

Cette fois, je vais vous apporter quelles sont les précautions pour transférer la liste de gauche JS vers la droite, et la liste de gauche JS vers la droite. Ce qui suit est un cas pratique, prenons un. regarder.

Implémentation de la fonction :

1. Ajoutez le contenu de la liste déroulante de gauche à la liste déroulante de droite, prenez en charge le mouvement de sélection multiple et supprimez le contenu de la liste déroulante de gauche. objet de la liste déroulante droite en même temps ;

2. Prend en charge le déplacement des positions supérieure et inférieure des éléments dans la liste

3. 🎜>

Code HTML

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur. le site php chinois ! 
<HTML> 
<HEAD> 
<TITLE>选择下拉菜单</TITLE> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<META NAME="Description" CONTENT="Power by hill"> 
</HEAD> 
<BODY> 
<p>选定一项或多项然后点击添加或移除(按住shift或ctrl可以多选)，或在选择项上双击进行添加和移除。</p> 
<form method="post" name="myform"> 
<table border="0" width="300"> 
<tr> 
<td width="40%"> 
<select style="WIDTH:100%" multiple name="list1" size="12" ondblclick="moveOption(document.myform.list1, document.myform.list2)"> 
<option value="北京">北京</option> 
<option value="上海">上海</option> 
<option value="山东">山东</option> 
<option value="安徽">安徽</option> 
<option value="重庆">重庆</option> 
<option value="福建">福建</option> 
<option value="甘肃">甘肃</option> 
<option value="广东">广东</option> 
<option value="广西">广西</option> 
<option value="贵州">贵州</option> 
<option value="海南">海南</option> 
<option value="河北">河北</option> 
<option value="黑龙江">黑龙江</option> 
</select> 
</td> 
<td width="20%" align="center"> 
<input type="button" value="添加" onclick="moveOption(document.myform.list1, document.myform.list2)"><br/> 
<br/> 
<input type="button" value="删除" onclick="moveOption(document.myform.list2, document.myform.list1)"> 
</td> 
<td width="40%"> 
<select style="WIDTH:100%" multiple name="list2" size="12" ondblclick="moveOption(document.myform.list2, document.myform.list1)"> 
</select> 
</td> 
<td> 
<button onclick="changepos(list2,-1)" type="button">上移</button> 
<br/> 
<button onclick="changepos(list2,1)" type="button">下移</button> 
</td> 
</tr> 
</table> 
值：<input type="text" name="city" size="40"> 
</form> 
<script language="JavaScript"> 
<!-- 
function moveOption(e1, e2){ 
try{ 
for(var i=0;i<e1.options.length;i++){ 
if(e1.options[i].selected){ 
var e = e1.options[i]; 
e2.options.add(new Option(e.text, e.value)); 
e1.remove(i); 
ii=i-1 
} 
} 
document.myform.city.value=getvalue(document.myform.list2); 
} 
catch(e){} 
} 
function getvalue(geto){ 
var allvalue = ""; 
for(var i=0;i<geto.options.length;i++){ 
allvalue +=geto.options[i].value + ","; 
} 
return allvalue; 
} 
function changepos(obj,index) 
{ 
if(index==-1){ 
if (obj.selectedIndex>0){ 
obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex-1)) 
} 
} 
else if(index==1){ 
if (obj.selectedIndex<obj.options.length-1){ 
obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex+1)) 
} 
} 
} 
//--> 
</script> 
</BODY> 
</HTML>

Lecture recommandée :

Comment le front-end transmet les données Json au backend


Comment convertir les champs html dans les données dans des balises HTML


Koa2 fait fonctionner la fonction de téléchargement et de téléchargement de fichiers

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!

Déclaration：
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
Article précédent：Explication détaillée des étapes d'utilisation de l'expression el dans jsArticle suivant：Explication détaillée des étapes d'utilisation de l'expression el dans js

Articles Liés

Voir plus