jQuery_jquery를 기반으로 Taobao와 유사한 패키지 선택 플러그인 구현

첫 번째는 페이지 HTML 코드입니다

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

로컬 통화

그런 다음 js를 호출하세요

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

/**************************************
* 로컬 json 데이터를 기반으로 옵션 열 생성
****************************************/
var 데이터노드=[
{텍스트:"공식 표준",값:"1",선택:true},
{text:"패키지 1",값:"2"},
{텍스트:"패키지 2", 값:"3"},
{텍스트:"패키지 3", 값:"4"},
{텍스트:"패키지 4", 값:"5"},
{텍스트:"패키지 5", 값:"6"},
{텍스트:"패키지 6",값:"7"},
{텍스트:"7번째 패키지",값:"8"},
{텍스트:"패키지 8", 값:"9"},
{text:"패키지 9",값:"10"}
];
/**
* @type {mylist}
* @param className 컨테이너 지원 레이어의 CSS 이름
* @param 개발자가 맞춤 제작한 사용자 클릭 후 호출되는 콜백 함수
​*/
var mylistobjLocal=new OptionList("testlocal","mycall");
mylistobjLocal.createListHtml(datanodes);
/************************************
* 원격 서버의 json 데이터를 기반으로 옵션 열 생성 ************************************
* 원격 서버의 json 데이터를 기반으로 옵션 열 생성
* @type {mylist}
* @param className 컨테이너 지원 레이어의 CSS 이름
* @param 개발자가 맞춤 제작한 사용자 클릭 후 호출되는 콜백 함수
​*/
var mylistobjAjax=new OptionList("testajax","mycall"); var url="http://127.0.0.1/option-jquery-dc/testJson.php
";
/**
* URL을 기반으로 옵션 목록 만들기
​*/
mylistobjAjax.createListHtmlForAjax(url);
/***
*사용자가 옵션 선택 시 콜백 기능
* @param result 현재 선택된 항목의 관련 매개변수를 반환합니다
​*/
var mycall=function(결과){
Alert("선택한 항목: " result.text ":" result.value);
}

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다