이번에는 JS를 사용하여 왼쪽 목록과 오른쪽 목록을 서로 이동할 때의 효과에 대해 알려드리겠습니다. JS를 사용하여 왼쪽 목록과 오른쪽 목록을 서로 이동할 때 주의할 점은 무엇인가요? 사례를 살펴보겠습니다.
구현된 기능:
1. 왼쪽 드롭다운 상자의 내용을 오른쪽 드롭다운 상자에 추가하고, 다중 선택 이동을 지원하며, 동시에 오른쪽 드롭다운 상자 개체를 제거합니다.2. 목록에서 항목의 위쪽 및 아래쪽 위치를 지원합니다.
3. 렌더링은 다음과 같습니다.
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>
이 기사의 사례를 읽으신 후 방법을 익히셨을 것입니다. . 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 도서:
Vue 사용자 정의 동적 구성 요소 사용에 대한 자세한 설명페이지를 공유하고 홈페이지로 돌아갑니다위 내용은 JS는 왼쪽 목록과 오른쪽 목록을 서로 이동시킵니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!