제이쿼리 셀렉트박스

by hlee0126

HTML

<div>
    <p><a href="#none" id="chHref">캐릭터 선택</a></p>
    <ul id="selectCon">
        <li><a href="" onclick="">캐릭터 선택1</a></li>
        <li><a href="" onclick="">캐릭터 선택2</a></li>
        <li><a href="" onclick="">캐릭터 선택3</a></li>
    </ul>
</div>

CSS

#selectCon {
    display: none;
}

JavaScript

var numClick = 1; // 셀렉트 박스 클릭상태 확인
$('#chHref').parent().click(function (e) {
    // 클릭시 링크 이동 방지
    e.preventDefault();
    e.returnValue = false;
    // 선택목록 표시
    numClick += 1;
    if (numClick % 2 != '1') { // 홀수, 짝수로 구분
        $('#selectCon').slideDown();
    } else {
        $('#selectCon').slideUp();
    }
});
$('#selectCon li a').click(function (e) {
    // 클릭시 링크 이동 방지
    e.preventDefault();
    e.returnValue = false;
    // 목록 선택시 텍스트 전달
    var selectText = $(this).text();
    $('#chHref').text(selectText);
    $('#selectCon').slideUp(); // 선택시 목록창 화면에서 지움
    numClick += 1; // 클릭상태 변경
});
$('#selectCon li').mouseover(function () {
    // 목록 마우스 오버시 배경색 변경
    $(this).css('backgroundColor', '#aaa');
    $('#selectCon li').mouseout(function () {
        $(this).css('backgroundColor', '#fff');
    });
});