관리 메뉴

맛집 여행 캠핑 일상 생활

JAVASCRIPT 배열을 SelectBox 로 만들기 본문

JAVASCRIPT

JAVASCRIPT 배열을 SelectBox 로 만들기

♥ 영은파더♥ 2016. 8. 10. 14:41

JAVASCRIPT 배열을 SelectBox 로 만들기


key=>value 로 된 배열을 셀렉트박스로 만들고 option 추가 및 삭제에 대한 예제이다.

<script>

function createSelectBox() {

    var opts = {"1":"Apple", "2":"Mango", "3":"Melon"};

    var obj = document.createElement("SELECT");

    for(key in opts) {

        var opt = document.createElement("OPTION");

        opt.value = key;

        opt.text = opts[key];

        obj.options.add(opt);

    }

    obj.id = 'iSelectBox';

    document.body.appendChild(obj);

}

function addOptionSelectBox() {

    var opts = {"4":"Orange"};

    var obj = document.getElementById('iSelectBox');

    for(key in opts) {

        var opt = document.createElement("OPTION");

        opt.value = key;

        opt.text = opts[key];

        obj.options.add(opt);

    }

}

function removeOptionSelectBox() {

    var obj = document.getElementById('iSelectBox');

    obj.options.remove(obj.length-1);

}

</script>


<button onclick="createSelectBox()">SelectBox 생성</button>

<button onclick="addOptionSelectBox()">SelectBox 옵션추가</button>

<button onclick="removeOptionSelectBox()">SelectBox 마지막옵션삭제</button>

아쉽게도 추가 삭제는 있어도 수정에 대한 함수가 없다.

옵션 수정을 하려면 remove 와 add 함수를 응용하여야 한다.




Trackback : 0 | Comments : 0
댓글쓰기 폼