이미지 불러오기 / ul li 태그 활용하여 드롭다운 만들기

Art With 프로젝트

1.  한 일 목록 (커밋 & 푸시 내역)

2. 이미지 업로드 기능 (input 태그 활용)

- (+)버튼을 눌러서 사진 업로드.

- 가장 앞에 있는 대표 사진 팝업에 띄우기.

- file input을 display: none 상태로 하여 보이지 않게 하였다.

- 우측 (+) 버튼 클릭을 하게 되면 file input 클릭 이벤트가 발생하게 하였다.

- 이미지는 div에 background로 설정하여 화면에 나타나도록 하였다.

- 코드 : 이미지 불러오기

 
<style>

    #imgInput {
        display: none;
    }
 
</style>
 
<input type="file" id="imgInput" />
 
<script>
 
    jQuery(function($){
        $('.add-image-btn').on('click', function(e){
            e.preventDefault();
            $('#imgInput')[0].click();
        });
    });
 
    $('#imgInput').change(function(){
        readImageURL(this);
    });
 
    $('.product-img').click(function(){
        $(this).css("backgroundImage", "none");
    });
 
    function readImageURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
 
            reader.onload = function (e) {
                setImageInDiv(e.target.result);
            }
 
            reader.readAsDataURL(input.files[0]);
        }
    }
 
    function setImageInDiv(imgURL) {
        imgURL = "url(" + imgURL + ")";
        $(".product-img").each(function() {
            if( $(this).css('backgroundImage') == "none") {
                $(this).css('backgroundImage', imgURL);
                return false;
            }
        });
    }
 
</script>

- 코드 : 팝업에 대표 이미지 불러오기

 
<style>

.represent-img-wrapper {
    display: table;
    margin-left: 10px;
    padding-bottom: 5px;
}

.represent-img-wrapper div {
    height: 59px; /* width 계산 후 height 값 세팅(jquery) */
    width: 59px;
    display: table-cell;
    border: solid grey 1px;
    border-radius: 5px;
    padding: 0px;
    top: 0px;
}

.product-represent-img {
    background-position: center top;
    background-size: 100% auto;
}
 
</style>
 
<!-- start popup -->
<div data-role="popup" id="popup_next" data-dismissible="false" style="width: 300px; height: 500px; border-width: 1;" data-overlay-theme="b">
    <div class="swiper-container swiper-container-popup">
        <div class="swiper-wrapper">
            <div id="share_info_div_one" class="swiper-slide swiper-slide-popup">
                <div style="width: 100%; position: absolute; top: 0; left: 0;">
                    <table class="share-info-table">
                        <tr>
                            <td class="share-info-table-head" valign="middle">나눔윗 요청확인
                                <a href="#" data-rel="back"><img src="images/design/img_x.png" style="position: absolute; right: 10px; top: 15px;  width: 30px; height: 30px;"></a>
                            </td>
                        </tr>
                    </table>
                    <div style="position: relative; top: 10px; font-size: 14px; font-weight: bold;">[물품정보]</div>
                    <table class="share-info-table" style="position: relative; top: 22px; padding-right: 20px; padding-left: 20px;">
                        <tr>
                            <th style="font-size: 0.9em; width: 35%; padding-bottom: 5px; padding-left: 5px; padding-right: 5px;">대표이미지</th>
                            <td>
                                <div class="represent-img-wrapper">
                                    <div class="product-represent-img"></div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <th class="share-info-table-th">카테고리</th>
                            <td class="share-info-table-td">의상 > 전통의상 > 여성한복</td>
                        </tr>
                        <tr>
                            <th class="share-info-table-th">태그</th>
                            <td class="share-info-table-td">#화려한 #궁중의상 #왕비</td>
                        </tr>
                        <tr>
                            <th class="share-info-table-th">거래가능지역</th>
                            <td class="share-info-table-td">서울시 동대문구
                            </td>
                        </tr>
                        <tr>
                            <th class="share-info-table-th">물품설명</th>
                            <td class="share-info-table-td">저희 연극이 의상실이 배경인데 화려한 여성한복을 구하기 재정상 어렵습니다. 화려한 여성한복이면 됩니다~
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
 
            <div id="share_info_div_two" class="swiper-slide swiper-slide-popup">
                <div style="width: 100%; position: absolute; top: 0; left: 0;">
                    <table class="share-info-table">
                        <tr>
                            <td class="share-info-table-head" valign="middle">나눔윗 요청확인
                                <a href="#" data-rel="back"><img src="images/design/img_x.png" style="position: absolute; right: 10px; top: 15px;  width: 30px; height: 30px;"></a>
                            </td>
                        </tr>
                    </table>
                    <div style="position: relative; top: 10px; font-size: 14px; font-weight: bold;">[나눔혜택정보]</div>
                    <table class="share-info-table" style="position: relative; top: 22px; padding-right: 20px; padding-left: 20px;">
                        <tr>
                            <th style="font-size: 0.9em; width: 35%; padding-bottom: 5px; padding-left: 5px; padding-right: 5px;">나눔혜택</th>
                            <td style="width: 65%; padding-left: 10px; padding-bottom: 5px; font-weight: bold; font-size: 0.9em; color: #848587; line-height: 1.5em;">티켓</td>
                        </tr>
                        <tr>
                            <th class="share-info-table-th">혜택명</th>
                            <td class="share-info-table-td">작업의 정석</td>
                        </tr>
                        <tr>
                            <th class="share-info-table-th">일시</th>
                            <td class="share-info-table-td">2016.06.22</td>
                        </tr>
                        <tr>
                            <th class="share-info-table-th">위치</th>
                            <td class="share-info-table-td">서울시 동대문구 제기동<br>동아플라자 2층</td>
                        </tr>
                        <tr>
                            <th class="share-info-table-th">상세설명</th>
                            <td class="share-info-table-td">연극티켓 2장 드려요~ </td>
                        </tr>
                        <tr>
                            <th class="share-info-table-th">소속</th>
                            <td class="share-info-table-td">단체</td>
                        </tr>
                        <tr>
                            <th class="share-info-table-th">대표자</th>
                            <td class="share-info-table-td">김원봉 </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>
 
    <div id="share_btn_set" class="center-img-frame" style="width: 100%; height: 50px">
        <a id="btn_next" href="#"><img style="width: 120px; height: auto;" src="images/design/img_next.png" ></a>
    </div>
 
    <div id="ticket_btn_set" class="center-img-frame" style="width: 100%; height: 50px; display: none">
        <a href="#" data-rel="back"><img style="width: 120px; height: auto;" src="images/design/img_okk.png" ></a>
    </div>
 
    <div class="comment-info-bottom-comment">
        * 나눔 요청에 대한 내용을 재확인해주세요.
    </div>
</div>
<!-- end popup -->
 
<script>
 
/* 팝업 관련 */
$('#btn_main_next').click(function(){
    $.ajax({
        async:true,
        success:function(data){
            loadRepresentImage();
        }
    })
})
 
function loadRepresentImage() {
    var url = $(".product-img").first().css( "backgroundImage");
    //alert(url);
    setImageInImgDiv(".product-represent-img", url)
}
 
function setImageInImgDiv(imgDivId, imgURL) {
    $(imgDivId).each(function() {
        $(this).css('backgroundImage', imgURL);
    });
}
 
</script>

3. ul li 태그를 활용한 드롭다운 메뉴 작성

- 카테고리 쪽 드롭다운은 참고 소스를 활용하여 잘 작성할 수 있었다.

- 일시 쪽 드롭다운은 하나의 드롭다운 내에서 연월일 전부 3개의 스크롤이 필요하여 조사를 통해 작성할 수 있었다. 처음에는 select option으로 작성하였으나... 스마트폰에서는 데스크탑에서 보던 것과 같은 형태로 나타나지 않아 다시 작성하게 되었다. select option으로는 만들 수 없다는 사실을 알았을 때 절망감이란... ㅠㅠㅠㅠ

- 힘들게 만든 거기 때문에 제발 디자인이 바뀌지 않길 기대한다.

- 코드 : ul li를 활용한 드롭다운 (카테고리 쪽 드롭다운 html 태그는 생략)

 
<style>

/* date picker */
.due-date-start {
    border-top: 1px solid;
    border-left: 1px solid #f08b68;
    border-right: 1px solid #f08b68;
    border-bottom: 1px solid #f08b68;
}

.due-date-end {
    border-top: 1px solid;
    border-left: 1px solid #f08b68;
    border-right: 1px solid #f08b68;
    border-bottom: 1px solid #f08b68;
}

#ul_date_picker_start {
    overflow: hidden;
    height: 120px;
}

#ul_date_picker_end {
    overflow: hidden;
    height: 120px;
}

.due-date-style-td {
    width: 33.33%;
    height: 108px;
}

.due-date-style-select {
    width: 100%;
    border: none;
    outline: none;
    text-indent: 6px;
    padding: 0;
    margin: 0;
    color: #f08b68;
    background: white;
}

a.date_select:hover {
    color: red;
}
 
</style>
 
<div class="bg-white input-box-default" id="date_div">
    <span class="title-span">일시</span>
    <hr/>
 
    <span class="description-span">
        나눔혜택을 제공할 수 있는 일시를 적어주세요.
    </span>
 
    <div class="wrapper-div">
        <table style="width: 100%; margin: 5 0 0 0; padding: 0;">
            <tr>
                <td style="width: 45%;">
                    <div id="date_picker_start_drop_down" class="wrapper-dropdown" tabindex="1" >
                        <span id="start_year_text">2016년</span>
                        <span id="start_month_text">6월</span>
                        <span id="start_date_text">15일</span>
                        <ul class="dropdown" id="ul_date_picker_start">
                            <li>
                                <div class="due-date-start" style="width: 100%;">
                                    <table style="width: 100%; margin: 0; padding: 0; border: 0; border-spacing: 0;">
                                        <tr>
                                            <td class="due-date-style-td start-year">
                                                <ul style="overflow: auto; height: 100%; list-style: none; padding: 0;">
                                                    <li><a class="date_select" href="#">2016</a></li>
                                                    <li><a class="date_select" href="#">2015</a></li>
                                                    <li><a class="date_select" href="#">2014</a></li>
                                                    <li><a class="date_select" href="#">2013</a></li>
                                                    <li><a class="date_select" href="#">2012</a></li>
                                                    <li><a class="date_select" href="#">2011</a></li>
                                                    <li><a class="date_select" href="#">2010</a></li>
                                                    <li><a class="date_select" href="#">2009</a></li>
                                                </ul>
                                            </td>
                                            <td class="due-date-style-td start-month">
                                                <ul style="overflow: auto; height: 100%; list-style: none; padding: 0;">
                                                    <li><a class="date_select" href="#">1</a></li>
                                                    <li><a class="date_select" href="#">2</a></li>
                                                    <li><a class="date_select" href="#">3</a></li>
                                                    <li><a class="date_select" href="#">4</a></li>
                                                    <li><a class="date_select" href="#">5</a></li>
                                                    <li><a class="date_select" href="#">6</a></li>
                                                    <li><a class="date_select" href="#">7</a></li>
                                                    <li><a class="date_select" href="#">8</a></li>
                                                    <li><a class="date_select" href="#">9</a></li>
                                                    <li><a class="date_select" href="#">10</a></li>
                                                    <li><a class="date_select" href="#">11</a></li>
                                                    <li><a class="date_select" href="#">12</a></li>
                                                </ul>
                                            </td>
                                            <td class="due-date-style-td start-date">
                                                <ul style="overflow: auto; height: 100%; list-style: none; padding: 0;">
                                                    <li><a class="date_select" href="#">1</a></li>
                                                    <li><a class="date_select" href="#">2</a></li>
                                                    <li><a class="date_select" href="#">3</a></li>
                                                    <li><a class="date_select" href="#">4</a></li>
                                                    <li><a class="date_select" href="#">5</a></li>
                                                    <li><a class="date_select" href="#">6</a></li>
                                                    <li><a class="date_select" href="#">7</a></li>
                                                    <li><a class="date_select" href="#">8</a></li>
                                                    <li><a class="date_select" href="#">9</a></li>
                                                    <li><a class="date_select" href="#">10</a></li>
                                                    <li><a class="date_select" href="#">11</a></li>
                                                    <li><a class="date_select" href="#">12</a></li>
                                                    <li><a class="date_select" href="#">13</a></li>
                                                    <li><a class="date_select" href="#">14</a></li>
                                                    <li><a class="date_select" href="#">15</a></li>
                                                    <li><a class="date_select" href="#">16</a></li>
                                                    <li><a class="date_select" href="#">17</a></li>
                                                    <li><a class="date_select" href="#">18</a></li>
                                                    <li><a class="date_select" href="#">19</a></li>
                                                    <li><a class="date_select" href="#">20</a></li>
                                                    <li><a class="date_select" href="#">21</a></li>
                                                    <li><a class="date_select" href="#">22</a></li>
                                                    <li><a class="date_select" href="#">23</a></li>
                                                    <li><a class="date_select" href="#">24</a></li>
                                                    <li><a class="date_select" href="#">25</a></li>
                                                    <li><a class="date_select" href="#">26</a></li>
                                                    <li><a class="date_select" href="#">27</a></li>
                                                    <li><a class="date_select" href="#">28</a></li>
                                                    <li><a class="date_select" href="#">29</a></li>
                                                    <li><a class="date_select" href="#">30</a></li>
                                                    <li><a class="date_select" href="#">31</a></li>
                                                </ul>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </li>
                        </ul>
                    </div>
                </td>
 
                <td style="width: 10%; text-align: center">
                    <span style="color: #f08b68; font-size: 20px">―</span>
                </td>
 
                <td style="width: 45%;">
                    <div id="date_picker_end_drop_down" class="wrapper-dropdown" tabindex="1" >
                        <span id="end_year_text">2016년</span>
                        <span id="end_month_text">6월</span>
                        <span id="end_date_text">15일</span>
                        <ul class="dropdown" id="ul_date_picker_end">
                            <li>
                                <div class="due-date-end" style="width: 100%;">
                                    <table style="width: 100%; margin: 0; padding: 0; border: 0; border-spacing: 0;">
                                        <tr>
                                            <td class="due-date-style-td end-year">
                                                <ul style="overflow: auto; height: 100%; list-style: none; padding: 0;">
                                                    <li><a class="date_select" href="#">2016</a></li>
                                                    <li><a class="date_select" href="#">2015</a></li>
                                                    <li><a class="date_select" href="#">2014</a></li>
                                                    <li><a class="date_select" href="#">2013</a></li>
                                                    <li><a class="date_select" href="#">2012</a></li>
                                                    <li><a class="date_select" href="#">2011</a></li>
                                                    <li><a class="date_select" href="#">2010</a></li>
                                                    <li><a class="date_select" href="#">2009</a></li>
                                                </ul>
                                            </td>
                                            <td class="due-date-style-td end-month">
                                                <ul style="overflow: auto; height: 100%; list-style: none; padding: 0;">
                                                    <li><a class="date_select" href="#">1</a></li>
                                                    <li><a class="date_select" href="#">2</a></li>
                                                    <li><a class="date_select" href="#">3</a></li>
                                                    <li><a class="date_select" href="#">4</a></li>
                                                    <li><a class="date_select" href="#">5</a></li>
                                                    <li><a class="date_select" href="#">6</a></li>
                                                    <li><a class="date_select" href="#">7</a></li>
                                                    <li><a class="date_select" href="#">8</a></li>
                                                    <li><a class="date_select" href="#">9</a></li>
                                                    <li><a class="date_select" href="#">10</a></li>
                                                    <li><a class="date_select" href="#">11</a></li>
                                                    <li><a class="date_select" href="#">12</a></li>
                                                </ul>
                                            </td>
                                            <td class="due-date-style-td end-date">
                                                <ul style="overflow: auto; height: 100%; list-style: none; padding: 0;">
                                                    <li><a class="date_select" href="#">1</a></li>
                                                    <li><a class="date_select" href="#">2</a></li>
                                                    <li><a class="date_select" href="#">3</a></li>
                                                    <li><a class="date_select" href="#">4</a></li>
                                                    <li><a class="date_select" href="#">5</a></li>
                                                    <li><a class="date_select" href="#">6</a></li>
                                                    <li><a class="date_select" href="#">7</a></li>
                                                    <li><a class="date_select" href="#">8</a></li>
                                                    <li><a class="date_select" href="#">9</a></li>
                                                    <li><a class="date_select" href="#">10</a></li>
                                                    <li><a class="date_select" href="#">11</a></li>
                                                    <li><a class="date_select" href="#">12</a></li>
                                                    <li><a class="date_select" href="#">13</a></li>
                                                    <li><a class="date_select" href="#">14</a></li>
                                                    <li><a class="date_select" href="#">15</a></li>
                                                    <li><a class="date_select" href="#">16</a></li>
                                                    <li><a class="date_select" href="#">17</a></li>
                                                    <li><a class="date_select" href="#">18</a></li>
                                                    <li><a class="date_select" href="#">19</a></li>
                                                    <li><a class="date_select" href="#">20</a></li>
                                                    <li><a class="date_select" href="#">21</a></li>
                                                    <li><a class="date_select" href="#">22</a></li>
                                                    <li><a class="date_select" href="#">23</a></li>
                                                    <li><a class="date_select" href="#">24</a></li>
                                                    <li><a class="date_select" href="#">25</a></li>
                                                    <li><a class="date_select" href="#">26</a></li>
                                                    <li><a class="date_select" href="#">27</a></li>
                                                    <li><a class="date_select" href="#">28</a></li>
                                                    <li><a class="date_select" href="#">29</a></li>
                                                    <li><a class="date_select" href="#">30</a></li>
                                                    <li><a class="date_select" href="#">31</a></li>
                                                </ul>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </li>
                        </ul>
                    </div>
                </td>
            </tr>
        </table>
    </div>
</div>
 
<script>
 
function DropDownCat(el) {
    this.dd = el;
    this.initEvents();
}
 
DropDownCat.prototype = {
    initEvents : function() {
        var obj = this;
 
        obj.dd.on('click', function(event){
            $(this).toggleClass('active');
            event.stopPropagation();
            changeHeightCategoryDiv();
        });
    }
}
 
function DropDownAddr(el) {
    this.dd = el;
    this.initEvents();
}
 
DropDownAddr.prototype = {
    initEvents : function() {
        var obj = this;
 
        obj.dd.on('click', function(event){
            $(this).toggleClass('active');
            event.stopPropagation();
            changeHeightAddrDiv();
        });
    }
}
 
function DropDownDateStartPicker(el) {
    this.dd = el;
    this.initEvents();
}
 
DropDownDateStartPicker.prototype = {
    initEvents : function() {
        var obj = this;
 
        obj.dd.on('click', function(event){
            $(this).addClass('active');
            event.stopPropagation();
            changeHeightDueDateStartDiv();
        });
    }
}
 
function DropDownDateEndPicker(el) {
    this.dd = el;
    this.initEvents();
}
 
DropDownDateEndPicker.prototype = {
    initEvents : function() {
        var obj = this;
 
        obj.dd.on('click', function(event){
            $(this).addClass('active');
            event.stopPropagation();
            changeHeightDueDateEndDiv();
        });
    }
}
 
$(function() {
    var yearDropDown = new DropDownCat( $('#cat_first_drop_down') );
    var monthDropDown = new DropDownCat( $('#cat_second_drop_down') );
    var dayDropDown = new DropDownCat( $('#cat_third_drop_down') );
    var districtDropDown = new DropDownAddr( $('#district_drop_down') );
    var cityDropDown = new DropDownAddr( $('#city_drop_down') );
 
    var datePickerStartDropDown = new DropDownDateStartPicker( $('#date_picker_start_drop_down') );
    var datePickerEndDropDown = new DropDownDateEndPicker( $('#date_picker_end_drop_down') );
 
    // 화면 아무 곳이나 찍었을 때 active 삭제
    $(document).click(function() {
        // all dropdowns
        $('.wrapper-dropdown').removeClass('active');
        $('#transport_div').css('height', '88');
        $('#address_div').css('height', '88');
        $('#date_div').css('height', '106');
    });
 
});
 
var countTransDropDownOpened = 0; // 1 : open, 0 : closed
var isDropDownOpenAddr = 0; // 1 : open, 0 : closed
 
$('#cat_div #ul_cat_first li a').each( function(index) {
    $(this).click( function() {
        $('#cat_first_drop_down span').text($(this).text());
        //changeHeightTransportDiv();
    });
});
 
$('#cat_div #ul_cat_second li a').each( function(index) {
    $(this).click( function() {
        $('#cat_second_drop_down span').text($(this).text());
        //changeHeightTransportDiv();
    });
});
 
$('#cat_div #ul_cat_third li a').each( function(index) {
    $(this).click( function() {
        $('#cat_third_drop_down span').text($(this).text());
        //changeHeightTransportDiv();
    });
});
 
$('#address_div #ul_city li a').each( function(index) {
    $(this).click( function() {
        $('#city_drop_down span').text($(this).text());
    });
});
 
$('#address_div #ul_district li a').each( function(index) {
    $(this).click( function() {
        $('#district_drop_down span').text($(this).text());
    });
});
 
//alert($('#year_drop_down div').text().trim());
 
function changeHeightCategoryDiv() {
    var numTransDropDownActive = $('#cat_div .active').length;
 
    if ($('#cat_div').css('height') == '88px') { // closed
        $('#cat_div').css('height', '250px');
    }
    else {
        if(numTransDropDownActive == 0)
            $('#cat_div').css('height', '88px');
    }
}
 
$("#textBoxBenefitContents").css("resize", "none");
 
function changeHeightAddrDiv() {
    var numAddrDropDownActive = $('#address_div.active').length;
 
    if ($('#address_div').css('height') == '88px') { // closed
        $('#address_div').css('height', '250px');
    }
    else {
        if(numAddrDropDownActive == 0)
            $('#address_div').css('height', '88px');
    }
}
 
function changeHeightDueDateStartDiv() {
    var numDueStartDropDownActive = $('#date_picker_start_drop_down.active').length;
    if ($('#date_div').css('height') == '106px') { // closed
        $('#date_div').css('height', '220px');
    }
    else {
        if(numDueStartDropDownActive == 0)
            $('#date_div').css('height', '106px');
    }
}
 
function changeHeightDueDateEndDiv() {
    var numDueEndDropDownActive = $('#date_picker_end_drop_down.active').length;
    if ($('#date_div').css('height') == '106px') { // closed
        $('#date_div').css('height', '220px');
    }
    else {
        if(numDueEndDropDownActive == 0)
            $('#date_div').css('height', '106px');
    }
}
 
$("#start_year_select").change(function(){
    $("#start_year_text").text($(this).val() + "년");
});
 
$("#start_month_select").change(function(){
    $("#start_month_text").text($(this).val() + "월");
});
 
$("#start_date_select").change(function(){
    $("#start_date_text").text($(this).val() + "일");
});
 
$("#end_year_select").change(function(){
    $("#end_year_text").text($(this).val() + "년");
});
 
$("#end_month_select").change(function(){
    $("#end_month_text").text($(this).val() + "월");
});
 
$("#end_date_select").change(function(){
    $("#end_date_text").text($(this).val() + "일");
});
 
$("#mobile_select").selectmenu();
 
$(".date_select").css("border", "0");
$(".date_select").css("display", "inline-block");
$(".date_select").css("padding", "0");
$(".date_select").css("height", "auto");
$(".date_select").css("padding", "3px");
$(".date_select").css("font-size", "0.8em");
//$(".end_date_select").removeClass('hover');
 
function changeSeletedDate(wholeObj, selectedObj) {
    wholeObj.css("background", "white");
    wholeObj.css("color", "#f08b68");
    selectedObj.css("background", "grey");
    selectedObj.css("color", "white");
}
 
$('.end-year li a').each( function(index) {
    $(this).click( function() {
        //alert($(this).text());
        $("#end_year_text").text($(this).text() + "년");
        changeSeletedDate($('.end-year li a'),  $(this));
    });
});
 
$('.end-month li a').each( function(index) {
    $(this).click( function() {
        //alert($(this).text());
        $("#end_month_text").text($(this).text() + "월");
        changeSeletedDate($('.end-month li a'),  $(this));
    });
});
 
$('.end-date li a').each( function(index) {
    $(this).click( function() {
        //alert($(this).text());
        $("#end_date_text").text($(this).text() + "일");
        changeSeletedDate($('.end-date li a'),  $(this));
    });
});
 
$('.start-year li a').each( function(index) {
    $(this).click( function() {
        //alert($(this).text());
        $("#start_year_text").text($(this).text() + "년");
        changeSeletedDate($('.start-year li a'),  $(this));
    });
});
 
$('.start-month li a').each( function(index) {
    $(this).click( function() {
        //alert($(this).text());
        $("#start_month_text").text($(this).text() + "월");
        changeSeletedDate($('.start-month li a'),  $(this));
    });
});
 
$('.start-date li a').each( function(index) {
    $(this).click( function() {
        //alert($(this).text());
        $("#start_date_text").text($(this).text() + "일");
        changeSeletedDate($('.start-date li a'),  $(this));
    });
});
 
</script>

※ 참고 자료 : http://tympanus.net/codrops/2012/10/04/custom-drop-down-list-styling/