검색 옵션처럼 select를 사용할 곳에 디자인이 입혀진 경우 마크업을 라디오 버튼으로 대체하여 작성한 예

javascript

function getClass(classname, tagname, tarID) {}	// 라이브러리 참조
function addEvent( obj, type, fn ) {}	// 라이브러리 참조
function removeEvent( obj, type, fn ) {}	// 라이브러리 참조
function stopBubble(e){}	// 라이브러리 참조

function selectMore(wrapper){
	var _d = document;
	var wrapper = _d.getElementById(wrapper);				// 링크박스
	var pointer = getClass('title','span',wrapper)[0];		// 타이틀
	var linkBox = getClass('linkbox','div',wrapper)[0];		// 목록
	var linkBoxList = linkBox.getElementsByTagName('label');	// 목록의 모든 라벨
	//	linkBox.style.display = 'none';		// 목록 숨김 초기화는 css로 지정함 : js제거시엔 작동 안함.

	function hideLinks(){			// 목록을 숨기는 함수
		if (linkBox.style.display == ''){
			linkBox.style.display = 'none';
		}
	}

	function toggleLinks(e){		// 목록 토글 함수
		if (linkBox.style.display == 'none'){
			linkBox.style.display = '';
			stopBubble(e);
			addEvent(document,'click',hideLinks);
		} else {
			linkBox.style.display = 'none';
			stopBubble(e);
			removeEvent(document,'click',hideLinks);
		}
		return false;
	}

	for (var i=0; i<linkBoxList.length; i++){
		linkBoxList[i].onclick = function(){
			pointer.childNodes[0].nodeValue = this.childNodes[0].nodeValue;		// 옵션 선택시 타이틀 value값 교체
			hideLinks();														// 선택시 목록 숨김
		}
		linkBoxList[linkBoxList.length-1].onblur = hideLinks;		// 링크목록의 마지막 링크에서 벗어나면 링크목록 숨김.
	}

	pointer.onclick = toggleLinks;			// 타이틀을 클릭 or 포커스 시 링크목록을 보이게 한다.
}

html

<div class="select_box" id="selectBox"><!-- id는 단순한 hook -->
	<span class="title">통합검색</span>
	<div class="linkbox" style="display:none;"><!-- css로 기본 숨김 -->
		<ul>
			<li><input type="radio" id="s_tot" name="test" /> <label for="s_tot">통합검색</label></li>
			<li><input type="radio" id="s_peo" name="test" /> <label for="s_peo">직원</label></li>
			<li><input type="radio" id="s_sub" name="test" /> <label for="s_sub">업무</label></li>
		</ul>
	</div>
	<input type="text" />
	<input type="button" class="button" value="검색" />
</div>
<script type="text/javascript">
//<![CDATA[
	selectMore('selectBox');
//]]>
</script>

미리보기