다중 SELECT 박스를 처리할 수 있는 plugin로
첫번째 select 박스 선택에 따라 두번째 select 박스의 내용이 바뀌는 plugin 입니다.
Full Source
1. 기본코드
$(document).ready(function()
{
"Vegetables": {
"key" : 10,
"defaultvalue" : 111, // 기본적으로 두번째 select box 값으로 potate 선택
"values" : {
"tomato": 110, // 항목 : 값으로 구성
"potato": 111,
"asparagus": 112
}
},
"Fruits": {
"key" : 20,
"defaultvalue" : 212, // 기본적으로 두번째 select box 값으로 kiwi 선택
"values" : {
"apple": 210,
"orange": 211,
"kiwi": 212,
"melon": 213
}
}
};
$('#first').doubleSelect('second', selectoptions);
});
2. 기본항목을 설정하는 예제
$(document).ready(function()
{
"Vegetables": {
"key" : 10,
"defaultvalue" : 111, // 기본적으로 두번째 select box 값으로 potate 선택
"values" : {
"tomato": 110, // 항목 : 값으로 구성
"potato": 111,
"asparagus": 112
}
},
"Fruits": {
"key" : 20,
"defaultvalue" : 212, // 기본적으로 두번째 select box 값으로 kiwi 선택
"values" : {
"apple": 210,
"orange": 211,
"kiwi": 212,
"melon": 213
}
}
};
var options = {emptyOption: true};
$('#first').doubleSelect('second', selectoptions, options);
});
- emptyOption 값이 true 일 경우 위와 같이 Choose를 기본으로 선택됩니다.
3. select box 처음 로딩시 값을 설정하고 기본항목을 사용자 설정하는 예제
$(document).ready(function()
{
"Vegetables": {
"key" : 10,
"defaultvalue" : 111, // 기본적으로 두번째 select box 값으로 potate 선택
"values" : {
"tomato": 110, // 항목 : 값으로 구성
"potato": 111,
"asparagus": 112
}
},
"Fruits": {
"key" : 20,
"defaultvalue" : 212, // 기본적으로 두번째 select box 값으로 kiwi 선택
"values" : {
"apple": 210,
"orange": 211,
"kiwi": 212,
"melon": 213
}
}
};
var options = {
preselectFirst : 10, // 초기에 첫번째 Select Box 항목을 Vegetables 로 선택
preselectSecond : 112, // 초기에 두번째 Select Box 항목을 asparagus 로 선택
emptyOption: true, // 기본항목 있음.
emptyValue: '...', // 기본항목 text --> '...'
emptyKey: 'nothing' // 기본항목의 키값 'nothing'
};
$('#first').doubleSelect('second', selectoptions, options);
});
'plugins > Forms' 카테고리의 다른 글
jQuery 3 State Switch Plugin (0) | 2009.07.07 |
---|