jQuery Multi Select Box (doubleSelect) Plugin

다중 SELECT 박스를 처리할 수 있는 plugin로
첫번째 select 박스 선택에 따라 두번째 select 박스의 내용이 바뀌는 plugin 입니다.

Full Source 

jquery.doubleSelect_0.zip

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);     
});