JAVASCRIPT 배열을 SelectBox 로 만들기

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 함수를 응용하여야 한다.