jquery multi select 처리

select option 생성해주는 유틸함수 정의.

$.fn.addOptions = function(jsonData, selected, valueView, firstOption) {
		 
		 return this.each(function(){
			 
			if (this.tagName != 'SELECT'){
				return;
			}
			var selectElement = this;
			
			if ($.browser.msie && firstOption) {
	        	selectElement.add(new Option(firstOption, ""));
	        } else if(firstOption){
	        	selectElement.add(new Option(firstOption, ""), null);
	        }
			
		    $.each(jsonData, function(index, optionData) {
		    	var text = this.text;
		    	
		    	if(valueView){
		    		text = text + " (" + this.value + ")";
		    	}
		    	
		        var option = new Option(text, this.value);
		        
		        if ($.browser.msie) {
		        	selectElement.add(option);
		        } else {
		        	selectElement.add(option, null);
		        }
		    });
		    if( selected ) {
		    	$("option[value='"+selected+"']", this).attr("selected", "true");
		    	$(this).trigger("change");
		    }
		 });
	};

사용방법

  // 응답은 text, value 가 포함된 json 이어야 함.
  $("select[name='sel1']").change(onChangeSelect);// 다른 selectbox 변경토록 이벤트 걸기.

  $("select[name='sel1']").children().remove();//초기화..
  var params = { "param1" : "value1" };
  $.getJSON("url...", params, function(data, textstatus) {
        	
      $("select[name='sel1']").addOptions(data.rows, "selectedValue", true, "::선택하세요::");
  });

  function onChangeSelect(){
       // 다른 select 변경하기.
       $("select[name='sel2']").children().remove();//초기화..
       $.getJSON("url...", params, function(data, textstatus) {
        	
              $("select[name='sel2']").addOptions(data.rows, "selectedValue", true, "::선택하세요::");
        });

  }