Seçme listesinin seçenekler dizisini değiştirme

Question

JavaScript veya mootools kullanarak html seçme listesinin seçenekler dizisini değiştirmenin bir yolu var mı?

Yeni bir seçenekle ayarlanan seçeneklerin tümünü değiştirmem gerekiyor. Benim ajax yanıt olarak yeni bir HTML seçenekleri ile birlikte doldurulur dizisi alır, bu yüzden eski liste boşaltıp

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

aşağıdaki Yukarıdaki kod içindeki hattında bana yakalanmamış istisna verir gibi yeni değerler eklemek için denemek döngü.

yakalanmamış istisna: [İstisna ... "beklenmeyen hata" nsresult: "0x8000ffff (NS_ERROR_UNEXPECTED)" konum: "JS çerçeve

Sadece benim için çalıştı eklemek için:

/* 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

işleyin DOM remove basıp nesneye add kullanarak Sen daha fazla bilgi için http://www.w3schools.com/jsref/dom_obj_select.asp görebilirsiniz

için aşağıdaki kodu yazmak zorunda bazı seçme elemana yeni seçenekler ekleyin:..

/** 
    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);