Javascript - thêm chọn theo chương trình

Question

Tôi muốn tạo một hàm để lập trình thêm một số thành phần trên trang. Giả sử tôi muốn thêm danh sách thả xuống có bốn tùy chọn:

<select name="drop1" id="Select1"> 
    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
    <option value="mercedes">Mercedes</option> 
    <option value="audi">Audi</option> 
</select> 

Làm cách nào tôi có thể làm điều đó?

Answer 1

này sẽ làm việc (tinh khiết JS, phụ thêm vào một div id myDiv):

var myDiv = document.getElementById("myDiv"); 

//Create array of options to be added 
var array = ["Volvo","Saab","Mercades","Audi"]; 

//Create and append select list 
var selectList = document.createElement("select"); 
selectList.id = "mySelect"; 
myDiv.appendChild(selectList); 

//Create and append the options 
for (var i = 0; i < array.length; i++) { 
    var option = document.createElement("option"); 
    option.value = array[i]; 
    option.text = array[i]; 
    selectList.appendChild(option); 
} 

Demo: http://jsfiddle.net/4pwvg/

Answer 2

var sel = document.createElement('select'); 
sel.name = 'drop1'; 
sel.id = 'Select1'; 

var cars = [ 
    "volvo", 
    "saab", 
    "mercedes", 
    "audi" 
]; 

var options_str = ""; 

cars.forEach(function(car) { 
    options_str += '<option value="' + car + '">' + car + '</option>'; 
}); 

sel.innerHTML = options_str; 


window.onload = function() { 
    document.body.appendChild(sel); 
}; 

Answer 3

tôi đã nhanh chóng thực hiện một chức năng mà có thể đạt được điều này, nó có thể không phải là cách tốt nhất để làm điều này nhưng nó chỉ đơn giản là hoạt động và nên được qua trình duyệt, xin vui lòng cũng biết rằng tôi KHÔNG phải là một chuyên gia trong JavaScript vì vậy bất kỳ lời khuyên là tuyệt vời :)

Pure Javascript Tạo phần tử Giải pháp

function createElement(){ 
    var element = document.createElement(arguments[0]), 
     text  = arguments[1], 
     attr  = arguments[2], 
     append = arguments[3], 
     appendTo = arguments[4]; 

    for(var key = 0; key < Object.keys(attr).length ; key++){ 
     var name = Object.keys(attr)[key], 
      value = attr[name], 
      tempAttr = document.createAttribute(name); 
      tempAttr.value = value; 
     element.setAttributeNode(tempAttr) 
    } 

    if(append){ 
     for(var _key = 0; _key < append.length; _key++) { 
      element.appendChild(append[_key]); 
     } 
    } 

    if(text) element.appendChild(document.createTextNode(text)); 

    if(appendTo){ 
     var target = appendTo === 'body' ? document.body : document.getElementById(appendTo); 
     target.appendChild(element) 
    }  

    return element; 
} 

cho phép xem cách chúng tôi làm cho điều này

<select name="drop1" id="Select1"> 
    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
    <option value="mercedes">Mercedes</option> 
    <option value="audi">Audi</option> 
</select> 

dưới đây là cách nó hoạt động

var options = [ 
     createElement('option', 'Volvo', {value: 'volvo'}), 
     createElement('option', 'Saab', {value: 'saab'}), 
     createElement('option', 'Mercedes', {value: 'mercedes'}), 
     createElement('option', 'Audi', {value: 'audi'}) 
    ]; 


    createElement('select', null, // 'select' = name of element to create, null = no text to insert 
     {id: 'Select1', name: 'drop1'}, // Attributes to attach 
     [options[0], options[1], options[2], options[3]], // append all 4 elements 
     'body' // append final element to body - this also takes a element by id without the # 
    ); 

đây là params

createElement('tagName', 'Text to Insert', {any: 'attribute', here: 'like', id: 'mainContainer'}, [elements, to, append, to, this, element], 'body || container = where to append this element'); 

Chức năng này sẽ phù hợp với nếu bạn phải ap nhiều yếu tố, nếu có bất kỳ cách nào để cải thiện câu trả lời này xin vui lòng cho tôi biết.

chỉnh sửa:

Đây là một bản demo làm việc

JSFiddle Demo

này có thể được tùy biến rất cao cho phù hợp với dự án của bạn!

Answer 4

Mã này sẽ tạo danh sách chọn động. Đầu tiên tôi tạo một mảng với tên xe. Thứ hai, tôi tạo một phần tử select động và gán nó cho một biến "sEle" và gắn nó vào phần thân của tài liệu html. Sau đó, tôi sử dụng một vòng lặp for để lặp qua mảng. Thứ ba, tôi tự động tạo phần tử tùy chọn và gán nó cho một biến "oEle". Sử dụng câu lệnh if, tôi gán các thuộc tính 'disabled' và 'selected' cho phần tử option đầu tiên [0] để nó được chọn luôn và bị vô hiệu hóa. Sau đó tôi tạo một mảng nút văn bản "oTxt" để nối thêm các tên mảng và sau đó nối thêm nút văn bản vào phần tử tùy chọn mà sau đó được nối thêm vào phần tử chọn.

var array = ['Select Car', 'Volvo', 'Saab', 'Mervedes', 'Audi']; 
 

 
var sEle = document.createElement('select'); 
 
document.getElementsByTagName('body')[0].appendChild(sEle); 
 

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

 
    if (i == 0) { 
 
    oEle.setAttribute('disabled', 'disabled'); 
 
    oEle.setAttribute('selected', 'selected'); 
 
    } // end of if loop 
 

 
    var oTxt = document.createTextNode(array[i]); 
 
    oEle.appendChild(oTxt); 
 

 
    document.getElementsByTagName('select')[0].appendChild(oEle); 
 
} // end of for loop