selectbox

개요

selectbox의 기능과 사용법에 대해 설명하는 문서입니다.
최종 수정일: 2015-09-30

• [뒤로 가기(사용자 설명서)](사용자 설명서)

dependencies

없음

예제

/**
*
*/
(function () {
    'use strict';

    // setting action
    var $selectbox = createSelectbox('#sb_test');

    // set list items
    setSelectboxItems('#sb_test', [
        { value: 10, text: '10개씩 보기' },
        { value: 20, text: '20개씩 보기' },
        { value: 50, text: '50개씩 보기' },
        { value: 100, text: '100개씩 보기' }
    ]);

    // listen event
    $selectbox.on('selectionChange', function (e, value) {
        console.log('select value:', value);
    });

    // get value (overriding jquery method)
    var value = $('#sb_test').val();
    var text = $('#sb_test').text();

    // set value (overriding jquery method)
    $('#sb_test').val(50);
    $('#sb_test').text('50개씩 보기');
})();

<div class="mu-selectbox" id="sb_test">
    <button class="mu-value">10개씩 보기</button>
    <ul class="mu-list">
        <li value="10">10개씩 보기</li>
        <li value="20">20개씩 보기</li>
        <li value="50">50개씩 보기</li>
        <li value="100">100개씩 보기</li>
    </ul>
</div>

functions

createSelectbox(String selector)

JQuery selector에 해당하는 문자열을 인자로 입력받아,
element를 Selectbox로 동작하도록 기능을 부여합니다.

setSelectboxItems(String selector, Array values)

JQuery selector에 해당하는 문자열을 인자로 입력받아,
리스트에 해당하는 element를 찾아 지정한 배열로 태그를 구성합니다.

values는 다음과 같이 두 가지 방식으로 입력이 가능합니다.

    // case 1
    setSelectboxItems('#sb_test', [
        { value: 10, text: '10개씩 보기' },
        { value: 20, text: '20개씩 보기' },
        { value: 50, text: '50개씩 보기' },
        { value: 100, text: '100개씩 보기' }
    ]);

    // case 2
    setSelectboxItems('#sb_test', [
        10,
        20,
        50,
        100,
    ]);

events

'selectionChange'

JQuery custom 이벤트로, 사용자가 Selectbox에서 어떠한 값을 선택하였을 때 발생합니다.
value를 인자로 전달받는데, 이 인자는 리스트의 value 속성 값입니다.
ex)

    <ul>
        <li value="10">10개씩 보기</li>
    </ul>

    $selectbox.on('selectionChange', function (e, value) {
        console.log('select value:', value); // 10
    });