suchen

Heim >Web-Frontend >js-Tutorial >JS realisiert die Funktion, die linke Liste in die rechte Liste zu verschieben

JS realisiert die Funktion, die linke Liste in die rechte Liste zu verschieben

亚连
亚连Original
2018-05-28 15:54:062460Durchsuche

In diesem Artikel wird hauptsächlich die JS-Funktion zum Verschieben der linken Liste in die rechte Liste vorgestellt. Die Hauptfunktion besteht darin, den Inhalt des linken Dropdown-Felds zum rechten Dropdown-Feld hinzuzufügen, die Mehrfachauswahlverschiebung zu unterstützen Verschieben Sie gleichzeitig das rechte Dropdown-Box-Objekt. Außerdem können Freunde, die es benötigen, auf

verweisen, um die Funktionen zu implementieren:

1 Der Inhalt des Drops -Down-Box auf der linken Seite wird zur Dropdown-Box auf der rechten Seite hinzugefügt und unterstützt gleichzeitig das Dropdown-Box-Objekt auf der rechten Seite.

2 die oberen und unteren Positionen der Elemente in der Liste;

3. Der Effekt ist wie folgt:

Html-Code

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

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Verwenden von Ajax und History.pushState zum Ändern der Seiten-URL ohne Aktualisierung example_AJAX bezogen

Über Ajax 3-Punkte-Zusammenfassung der technischen Prinzipien_AJAX-bezogen

AJAX-Kapselungsklassen-Nutzungsleitfaden

Das obige ist der detaillierte Inhalt vonJS realisiert die Funktion, die linke Liste in die rechte Liste zu verschieben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So konfigurieren Sie den globalen Installationspfad des Node.js-ModulsNächster Artikel：So konfigurieren Sie den globalen Installationspfad des Node.js-Moduls

In Verbindung stehende Artikel

Mehr sehen