> 웹 프론트엔드 > JS 튜토리얼 > 프로토타입을 이용하여 구현한 간단하고 컴팩트한 다단계 연계 메뉴

프로토타입을 이용하여 구현한 간단하고 컴팩트한 다단계 연계 메뉴

PHP中文网
풀어 주다: 2016-05-16 19:16:12
원래의
921명이 탐색했습니다.

인터넷에서 검색하면 찾을 수 있는 js 라이브러리 프로토타입.js를 사용하세요. 오픈소스 js 함수 라이브러리입니다.
오늘 링크 메뉴에 관한 글을 몇 개 봤습니다
누구나 이에 대한 더 좋은 코드가 있어야 합니다
저희 팀에서 사용하는 비교적 컴팩트한 코드도 게시했습니다

// 작성자: downpour
var DoubleCombo = Class.create();
DoubleCombo.prototype = {
초기화: function(source, target,ignore, url, options, excute) {
this .source = $(source) ;
this.target = $(target);
this.ignore = $A(ignore);
this.url =
this.options = $H(options); > this.source.onchange = this.doChange.bindAsEventListener(this);
if(excute) {
this.doChange()
} ,
},
doChange: function( ) {
if(this.source.value != '') {
// 먼저 무시 항목을 삭제합니다.
this.ignore.each(
함수(값) {                                                                  )
// ajax에 대한 매개변수 생성
var query = $H({ id: this.source.value })
var 매개변수 = {
메소드: 'post',
매개변수: $H (this.options) .merge(query).toQueryString(),                                                                                     ~                        s );
}
},
getResponse: function(request) {
this.target.options.length = 1;
this.target.options[0].selected = '선택됨';
var response = $A(request.responseText.trim().split(';'))
response.length- -;
for(var i = 0; i < response.length; i ) {
var optionParam = response[i].split(',')
this.target.options[this .target.options.length] = new Option(optionParam[1], optionParam[0]);
}                                                                                                                     예를 들어 상하이에는 지방이 없습니다. >url 액션 url
옵션 액션 매개변수
링크 여부 실행
국가, 지방자치단체, 지방자치단체 레벨 3 연계의 좀 더 일반적인 예를 들어보세요
코드
-el :options collection="countries" property="id" labelProperty="name" />

& lt; 옵션 값 ="& gt;-선택하세요-& lt;/option & gt; ... ;/html-el:select>

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿