jquery mobile listbox_jquery의 가치 원칙과 코드

jQuery 작동 목록 상자의 원리는 어렵지 않습니다. 즉, 목록 상자에서 선택한 항목을 이동하여 필요한 이동 효과를 얻는 것입니다. 예제에서는 json의 사용법에도 익숙해질 수 있도록 json 데이터 구조를 사용하여 목록 상자를 동적으로 바인딩했습니다.

먼저 간단한 html부터 살펴보겠습니다. 서버 컨트롤은 자동으로 html 태그로 변환되므로 예제에서는 서버 컨트롤을 사용하지 않았습니다. 다음과 같습니다.

는 자동으로 다음과 같이 변환됩니다.
html 코드는 다음과 같습니다.

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

>

" id="btnRight" value =">>" />

> ;

json 데이터 구조는 다음과 같습니다.

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

var vData = { "datalist ":

[
{ "data": "jQuery", "text": "jQuery" },
{ "data": "Asp.net", "text": "Asp.net" },
{ "data": "인터넷" , "text": "인터넷" },
{ "data": "Sql", "text": "Sql" }
]
};


다음은 jQuery 구현 코드이며 주요 위치에 주석이 있습니다.

코드 복사 코드는 다음과 같습니다. //데이터 바인딩

var vlist = "" ;

//json 데이터 트래버스
jQuery.each(vData.datalist, function(i, n) {
vlist = "" n .text " ";
});
//listLeft
$("#listLeft").append(vlist)
//왼쪽 이동
$ ("#btnRight").click(function() {
//data 옵션으로 선택한 데이터 세트는 변수 vSelect
var vSelect = $("#listLeft option:selected")에 할당됩니다. ;
// 복제 데이터가 listRight에 추가되었습니다.
vSelect.clone().appendTo("#listRight")
//listRight에서 옵션도 제거합니다.
vSelect.remove(); 🎜>});
//오른쪽 이동
$("#btnLeft").click(function() {
var vSelect = $("#listRight option:selected");
vSelect .clone().appendTo("#listLeft");
vSelect.remove()
});