Javascript Select 작업의 대규모 컬렉션_양식 특수 효과-JS 튜토리얼-php.cn

Javascript Select 작업의 대규모 컬렉션_양식 특수 효과

WBOY

풀어 주다： 2016-05-16 18:52:32

원래의

1079명이 탐색했습니다.

사실 이 책은 늘 내 컴퓨터에 있었지만, 한번도 주의 깊게 읽은 적이 없었다. 저는 자바스크립트를 정식으로 배워본 적이 없습니다. 가끔 사용할 때 인터넷에 가서 코드를 찾아 수정하고 사용합니다. 이번에 처음부터 자세히 살펴보면 정말 많은 이득을 얻었습니다. , 심지어 나도 자바스크립트를 좋아해요.
이제 책에서 Textbox, Button, Label 등과 같은 Form 요소의 작업이 비교적 간단하다는 점을 살펴보겠습니다. 그러나 Select를 보면 조금 더 복잡해졌습니다. 그래서 꼼꼼히 공부해보고 싶어서 이런 글이 나왔습니다. 선택 작업에는 동적 추가, 삭제, 이동, 선택한 항목의 값 가져오기, 정렬 등이 포함되며 이제 하나씩 설명하겠습니다.
1. 선택에 옵션 추가

코드 복사 코드는 다음과 같습니다.

//IE에만 해당, FF는 Add 메서드를 지원하지 않습니다. 
function fnAddItem(text,value) 
{ 
var selTarget = document.getElementById("selID") 
selTarget.Add( new Option("text","value")); 
} 
//IE FF 모두 OK 
function fnAdd(oListbox, sName, sValue) 
{ 
 var oOption = document.createElement("option"); 
oOption.appendChild(document.createTextNode(sName)) 
if (arguments.length == 3) 
{ 
oOption.setAttribute( "value", sValue ); 
} 
oListbox.appendChild(oOption) 
} 

선택

코드 복사 코드는 다음과 같습니다.

function fnRemoveItem() 
{ 
var selTarget = document.getElementById("selID "); 
if(selTarget.selectedIndex > -1) 
{//선택된 설명
for(var i=0;i{ 
if(selTarget.options[i].selected) 
{ 
selTarget.remove(i) 
i = i - 1;//이 줄에 주목하세요
} 
} 
} 
} 

3. 선택 항목을 다른 선택 항목으로 이동

코드 복사 코드는 다음과 같습니다.

function fnMove(fromSelectID,toSelectID) 
{ 
var from = document. getElementById(fromSelectID); 
var to = document.getElementById(toSelectID) 
for(var i=0;i{ 
if(from.options [i].selected) 
{ 
to.appendChild(from.options[i]) 
i = i - 1 
} 
} 
} 

if의 코드도 다음과 같습니다. 다음 코드 줄은

코드 복사 코드를 대체하는 데 사용할 수 있습니다.

var op = from.options [i]; 
to.options.add(new Option(op.text, op.value)) 
from. 제거(i) 

4. 선택에서 옵션 위아래로 이동

코드 복사 코드는 다음과 같습니다.

function fnUp( ) 
{ 
var sel = document.getElementById("selID") 
for(var i =1; i < sel.length; i ) 
{//이동이 필요하므로 i=1
if(sel.options[i].selected) 
{ 
if(!sel.options.item(i-1).selected) 
 {//위 항목이 선택되지 않았습니다. 위아래로 교체하세요. 
var selText = sel.options[ i].text; 
var selValue = sel.options[i].value; 
sel.options[i ].text = sel.options[i-1].text; i].value = sel.options[i-1].value; 
sel.options[i].selected = false; 
sel.options[i-1].text = 
sel; .options[i-1].value = selValue; 
sel.options[i-1].selected=true; 
} 
} 
} 

 
상위 항목과 하위 항목을 교환할 때 다음 코드를 사용할 수도 있지만 Dom Any 작업을 할 때마다 전체 페이지가 다시 레이아웃되기 때문에 효율성이 매우 낮으므로 속성 값을 수정하는 것이 좋습니다 요소의 직접. 

코드 복사 코드는 다음과 같습니다.

var oOption = sel.options[i]

 var oPrevOption = sel.options[i-1] 
sel.insertBefore(oOption,oPrevOption); 


아래로 이동하는 것과 동일

코드 복사 코드는 다음과 같습니다.

function fnDown() 
{ 
var sel = fnGetTarget("selLeftOrRight") 
for(var i=sel.length -2; i >= 0; i-- ) 
{//아래로 이동하세요. 마지막은 처리할 필요가 없으므로 두 번째부터 마지막까지 바로 시작하세요. 
if(sel.options.item(i).selected) 
{ 
if( !sel.options.item(i 1).selected) 
{//다음 옵션이 선택되지 않은 경우 위아래로 교체 
var selText = sel.options.item(i).text ; 
var selValue = sel.options.item(i).value; 
sel.options.item(i).text = sel.options.item(i 1).text; .item(i).값 = sel.options.item(i 1).value; 
sel.options.item(i).selected = 
sel.options.item(i 1).text; = selText; 
 sel.options.item(i 1).value = selValue; 
sel.options.item(i 1).selected=true; 
} 
} 
} 
 

5. Select의 옵션 정렬
여기에서는 Array 객체의 정렬 메서드를 사용하여 작동합니다. 정렬에 사용되는 알고리즘은 이 함수에서 정의할 수 있습니다. array.sort([compareFunction]) CompareFunction은 두 개의 매개변수(p1, p2)를 허용합니다. 정렬 작업이 진행 중일 때 배열 객체는 비교를 위해 매번 두 개의 값을 전달합니다. 정수 값: 반환 값이 0보다 크면 p1은 p2 뒤에 순위가 지정되고, 반환 값이 0보다 작으면 p1은 p2보다 먼저 순위가 지정되며, 반환 값이 0이면 아무 작업도 수행되지 않습니다.
예:

코드 복사 코드는 다음과 같습니다.

function fnCompare( a,b)

{ 
if (a < b) 
return 
if (a > b) 
return 1; } 
 var arr = new Array();//arr에 값 추가 
arr.sort(fnCompare) 
//여기서 정렬 작업의 결과는 arr에 있는 항목입니다. 작은 것부터 큰 것 순으로 오름차순 정렬
//fnCompare를 
으로 변경하는 경우//if (a < b) 
// return 1 
//if (a > b; ) 
// return -1;//return 0;//정렬 결과는 내림차순입니다
다음은 Select의 Option 정렬입니다
// 옵션 값으로 정렬할 수 있고 텍스트로 정렬할 수도 있습니다. 여기서는 값으로만 ​​정렬하는 방법을 설명합니다. 
function sortItem() 
{ 
var sel = document.getElementById("selID") ; 
var selLength = sel.options.length; 
var arr = new Array(); 
var arrLength; //모든 옵션을 배열에 넣습니다. 
for(var i=0; i{ 
arr[i] = sel.options[i]; 
} 
arrLength = arr.length 
arr.sort(fnSortByValue);// 정렬
//원래 옵션을 먼저 삭제합니다. 
while(selLength--) 
{ 
sel.options[selLength] = null 
} 
//정렬된 옵션을 다시 넣습니다. Select
for(i= 0;i{ 
fnAdd(sel,arr[i].text,arr[i].value) 
//sel. add(new Option(arr[i] .text,arr[i].value)) 
} 
} 
function fnSortByValue(a,b) 
{ 
var aComp = a .value.toString(); 
var bComp = b.value.toString(); 
if (aComp < bComp) 
return -1 
if (aComp > bComp) 
return 1; 
return 0 ; 
} 


정렬할 때 더 많은 옵션이 있습니다. 예를 들어 값을 정수 또는 문자열로 정렬하면 결과가 달라집니다. 공간적 제약으로 인해 더 이상의 소개는 필요하지 않습니다. 
이 모든 작업을 파일에 작성했고, 실행 효과는 아래와 같습니다 