JS Custom Select Box 만들기

심심해서 만들어봄ㅎㅎ

 

CSS

#select_box1, #select_box2, #select_box3{ float:left; position:relative; width:200px; z-index:3; }
#select_box1{ z-index:3; }
#select_box2{ z-index:2; }
#select_box3{ z-index:1; }
.select_absolute{ position:absolute; left:0; top:0; width:calc(100% - 2px); line-height:43px; cursor:pointer; border:solid 1px #D0D2D5; font-weight:400; color:#000000; font-size:14px; background-color:#FFFFFF; overflow:hidden; z-index:1; }
.select_box_close{ height:43px; }
.select_box_open{ height:auto; overflow:auto; }
.selected{ float:left; position:relative; width:calc(100% - 40px); padding:0 20px; text-align:left; }
.arrow_rotate{ transform:rotate(180deg); }
.select_box_arrow{ float:right; width:20px; height:10px; margin:17px 3px 16px 0; }
.option_box{ float:left; width:100%; text-align:left; cursor:pointer; }
.option{ float:left; width:calc(100% - 40px); padding:0 20px; }

 

HTML

<div id="select_box1" class="select_box">
	<div class="select_absolute select_box_close" state="close">
  	<div class="selected">
  		<span class="selected_text">선택해주세요</span>
		<img class="select_box_arrow" src="화살표 이미지.jpg">
	</div>
	<div class="option_box">
    	<div class="option">선택해주세요</div>
        <div class="option">선택1</div>
        <div class="option">선택2</div>
        <div class="option">선택3</div>
        <div class="option">선택4</div>
	</div>
</div>
<br>
<div id="select_box2" class="select_box">
	<div class="select_absolute select_box_close" state="close">
  	<div class="selected">
  		<span class="selected_text">선택해주세요</span>
		<img class="select_box_arrow" src="화살표 이미지.jpg">
	</div>
	<div class="option_box">
    	<div class="option">선택해주세요</div>
        <div class="option">선택1</div>
        <div class="option">선택2</div>
        <div class="option">선택3</div>
        <div class="option">선택4</div>
	</div>
</div>
<br>
<div id="select_box3" class="select_box">
	<div class="select_absolute select_box_close" state="close">
  	<div class="selected">
  		<span class="selected_text">선택해주세요</span>
		<img class="select_box_arrow" src="화살표 이미지.jpg">
	</div>
	<div class="option_box">
    	<div class="option">선택해주세요</div>
        <div class="option">선택1</div>
        <div class="option">선택2</div>
        <div class="option">선택3</div>
        <div class="option">선택4</div>
	</div>
</div>

 

JS(jQuery)

document.onclick = function(e){
        var target_c = e.target.className;
        var target = $(e.target).parents('.select_box').children('.select_absolute');

        if("option" == target_c){
            target.removeClass('select_box_open');
            target.addClass('select_box_close');
            $(e.target).parents('.select_absolute').children().children('span').text(e.target.textContent);
        }else if("selected" == target_c || "select_box_arrow" == target_c || "select_text" == target_c){
            if(target.hasClass('select_box_close')){
                var count = $(".select_absolute").length;
                for(var x=0;x<count;x++){
                    var this_target = $(".select_absolute").eq(x);
                    this_target.removeClass('select_box_open');
                    this_target.addClass('select_box_close');
                }
                target.removeClass('select_box_close');
                target.addClass('select_box_open');
            }else{
                target.removeClass('select_box_open');
                target.addClass('select_box_close');
            }

        }else{
            var count = $(".select_absolute").length;

            for(var x=0;x<count;x++){
                var this_target = $(".select_absolute").eq(x);
                if(this_target.hasClass('select_box_open')){
                    this_target.removeClass('select_box_open');
                    this_target.addClass('select_box_close');
                }
            }
        }
    }

 

Result

 

See the Pen pobZWBa by YOHAN (@yoyohaha) on CodePen.

 

 

화살 이미지는 알아서 구해서 쓰시오..