JS는 왼쪽 목록을 오른쪽 목록으로 이동하는 기능을 구현합니다.-JS 튜토리얼-php.cn

JS는 왼쪽 목록을 오른쪽 목록으로 이동하는 기능을 구현합니다.

亚连

풀어 주다： 2018-05-28 15:54:06

원래의

2470명이 탐색했습니다.

이 기사에서는 왼쪽 목록을 오른쪽 목록으로 이동하는 JS 기능을 주로 소개합니다. 주요 기능은 왼쪽 드롭다운 상자의 내용을 오른쪽 드롭다운 상자에 추가하고 다중 선택 이동을 지원하며, 동시에 오른쪽 드롭다운 상자 개체를 사용합니다. 필요한 친구는

를 참조하여 기능을 구현할 수 있습니다.

1. 왼쪽 드롭다운 상자의 내용을 오른쪽 드롭다운 상자에 추가하고 멀티를 지원합니다. -이동을 선택하고 동시에 오른쪽 드롭다운 상자 개체를 제거합니다.

2. 목록에서 항목의 위쪽 및 아래쪽 위치 이동을 지원합니다.

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>

로그인 후 복사

위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

새로 고침 없이 페이지 URL을 변경하기 위해 ajax와 History.pushState를 사용하는 예_AJAX 관련

Ajax 기술 원리 3점 요약_AJAX 관련

AJAX 캡슐화 클래스 사용 가이드

위 내용은 JS는 왼쪽 목록을 오른쪽 목록으로 이동하는 기능을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!