更改選擇列表的選項數組

Question

有沒有辦法使用javascript或mootools更改html選擇列表的選項數組？

我需要用新的設置替換整個選項集。在我的Ajax響應我收到填滿了新的HTML選項的數組，所以我儘量清空舊列表和添加新值如下

$('element').options.length=0; 
for (i=0; i<newSet.length; i++) 
{ 
    $('element').options[i]=newSet[i]; 
} 

上面的代碼給我一個未捕獲的異常就行內部循環。

未捕獲的異常：[異常... 「意外錯誤」 nsresult： 「0x8000ffff（NS_ERROR_UNEXPECTED）」 的位置：「JS框架

只是爲了增加對我工作：

/* get new options from json*/ 
var new_options = response.options; 

/* Remove all options from the select list */ 
$('idresource').empty(); 
/* Insert the new ones from the array above */ 
for (var key in new_options) 
{ 
var opt = document.createElement('option'); 
    opt.text = new_options[key]; 
    opt.value = key; 
    $('idresource').add(opt, null); 
} 

Answer 1

var new_options = ['Option 1', 'Option 2', 'Option 3']; 

/* Remove all options from the select list */ 
$('yourSelectList').empty(); 

/* Insert the new ones from the array above */ 
$each(new_options, function(value) { 
    new Element('option') 
     .set('text', value) 
     .inject($('yourSelectList')); 
}); 

Answer 2

操縱DOM使用remove和add選擇對象上可以看到http://www.w3schools.com/jsref/dom_obj_select.asp更多信息

對於增加新的選項，選擇一些元素我寫了下面的代碼：。

/** 
    Adds an option to a select(HTML) element. 
    @param {HTMLElement} select_element The select eletement. 
    @param {string} option_str The text of the option. 
    @param {Object} [option_attr] The options to be copied into the option element created. 
    @returns {HTMLElement} The option element created. 
*/ 
function addOptionStrToSelectElement(select_element, option_str, option_attr){ 
    if (!option_attr) option_attr = {}; 
    var doc = select_element.ownerDocument; 
    var opt = doc.createElement("option"); 
    opt.text = option_str; 
    for (var prop in option_attr){ 
     if (option_attr.hasOwnProperty(prop)){ 
      opt[prop] = option_attr[prop]; 
     } 
    } 
    doc = null; 
    if (select_element.add.length === 2){ 
     select_element.add(opt, null); // standards compliant 
    } else{ 
     select_element.add(opt); // IE only 
    } 
    return opt; 
} 

Answer 3

HTML

<select class="element"> 
    <option value="1">One</option> 
    <option value="2">Two</option> 
    <option value="3">Three</option> 
</select> 

<button><<<</button> 

<select class="newSel"> 
    <option value="11">NewOne</option> 
    <option value="22">NewTwo</option> 
    <option value="33">NewThree</option> 
</select> 

的Javascript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 

$("button").click(function(){ 
    var oldSel = $('.element').get(0); 

    while (oldSel.options.length > 0) { 
     oldSel.remove(oldSel.options.length - 1); 
    } 

    var newSel = $('.newSel').get(0); 

    for (i = 0; i < newSel.length; i++) 
    { 
     var opt = document.createElement('option'); 

     opt.text = newSel.options[i].text; 
     opt.value = newSel.options[i].value; 

     oldSel.add(opt, null); 
    } 
}) 

Demo

Answer 4

var newOptionsHtml = "<option value='2'>New Option 1</option><option value='3'>New Option 2</option>"; 

$("#test").html(newOptionsHtml);