JavaScript - Select、Options

Select 的 HTML 用法

    <select name="selectName" onChange="selectChange_func(this);">
    <option value="returnValue1">displayText1</option>
    <option value="returnValue2" selected>displayText2</option>
    <option value="returnValue3">displayText3</option>
    </select>

以下option例子，需先在HTML先加入語法

    
    <select id="select_obj1"></select>
    <select id="select_obj2"></select>

使用 document Element

JS 語法 - 刪除全部options

    var obj = document.getElementById('select_obj1');
    while (obj.length > 0) {
        obj.remove(0);
    }

JS語法 - 新增options

    var obj = document.getElementById('select_obj1');
    var option = document.createElement('option');
    option.value = "設定值";
    option.text = "顯示文字";
    option.selected = 1;
    obj.add(option);
    // 轉換成 HTML 代碼為： <option value="設定值" selected>顯示文字</option>

JS語法 - 插入options

    var obj = document.getElementById('select_obj1');
    var option = document.createElement('option');
    option.value = "設定值";
    option.text = "顯示文字";
    option.selected = 1;
    obj.add(option, 2); // 新增資料插入在第三筆的位置(從0開始)

JS語法 - 轉移全部options

    var obj1 = document.getElementById('select_obj'+1);
    var obj2 = document.getElementById('select_obj'+2);
    var selectText = obj1.value; // obj1.text 為 undefined
    while(obj1.length > 0) {
        option = obj1.options[0];
        obj2.add(option);
        // obj2.add 之後不用再呼叫 obj1.remove，會自動搬移過去
    }
    obj2.value = selectText; // 恢復選取值

JS語法 - 查看目前options選取值

    var obj = document.getElementById('select_obj1');
    var selectedIndex = obj.selectedIndex;              // 目前選取的option Index
    var value = obj.options[selectedIndex].value;       // 目前選取的option設定值
    var text = obj.options[selectedIndex].text;         // 目前選取的option顯示文字
    var selected = obj.options[selectedIndex].selected; // 目前選取的option是否被選取

JS語法 - 歷遍所有options

    var obj = document.getElementById('select_obj1');
    for(var i=0; i<obj.length; i++) {
        console.log(i,
                obj.options[i].value,    // 設定值
                obj.options[i].text,     // 顯示文字
                obj.options[i].selected);// 是否選取
    }

使用 jQuery

jQuery語法 - 新增options (下列方式擇一即可)

var option = new Option('displayText', 'returnValue');
option.selected = 1; // 新增時設定為選取
$('#select_obj1').append(option);

$('#select_obj1').append(new Option('displayText', 'returnValue')); // 新增時無設定選取

$('#select_obj1').append($('<option>', {value:'returnValue', text:'displayText', selected:1}));  // 新增時設定為選取
$('#select_obj1').append($('<option>', {value:'returnValue', text:'displayText' }));  // 新增時無設定選取

$('#select_obj1').append('<option value=\"returnValue\" selected>displayText</option>'); // 新增時設定為選取
$('#select_obj1').append('<option value=\"returnValue\">displayText</option>');   // 新增時無設定選取

var option = $('<option/>').val('returnValue').text('displayText');
option[0].selected = 1; // 新增時設定為選取
option.appendTo('#select_obj1');

$('<option/>').val('returnValue').text('displayText').appendTo('#select_obj1'); // 新增時無設定選取

    var obj = $('#select_obj1');
    var optionsData = {
            '0001' : 'Red',
            '0002' : 'Blue',
    };
    $('option', obj).remove();    // 清空原本option資料
    $.each(optionsData, function(text, value) {
            var option = new Option(value, text);
            obj.append($(option));
    });

    $('#select_obj1').append($('<option></option>').attr('value', 'returnValue').text('displayText').attr('selected', true));
    $('#select_obj1').append($('<option></option>').attr('value', 'returnValue').text('displayText'));

    var option = $('<option></option>');
    option.text('displayText');
    option.val('returnValue');
    option[0].selected = true;
    $('#select_obj1').append(option);

jQuery語法 - 插入options

$("#select_obj1 option").eq(2).before(new Option('displayText', 'returnValue')); // 新增資料插入在第三筆的位置(從0開始)

jQuery語法 - 刪除options (下列方式擇一即可)

    $('#select_obj1').empty();  // 清空

    $('#select_obj1 option[value=\"returnValue\"]').remove();

    $('#select_obj1 option[value=\"returnValue\"]').each(function() {
        $(this).remove();
    });

    $('#select_obj1 option').each(function() {
        if($(this).val() == 'returnValue')
            $(this).remove();
    });

jQuery語法 - 歷遍options

    var obj = $('#select_obj1');
    for(var i=0; i<obj[0].length; i++) {
        console.log(i,
                obj[0][i].value,    // 設定值
                obj[0][i].text,     // 顯示文字
                obj[0][i].selected);// 是否選取
    }

    var options = $('#select_obj1 option');
    for(var i=0; i<options.length; i++) {
        console.log(i,
                options[i].value,    // 設定值
                options[i].text,     // 顯示文字
                options[i].selected);// 是否選取
    }

    $('#select_obj1 option').each(function() {
    console.log($(this).val(),   // 設定值
            $(this).text(),      // 顯示文字
            $(this)[0].selected);// 是否選取
    });