Trình duyệt cách trung lập để thêm tùy chọn vào phần tử được chọn trong javascript

Question

Tôi vừa học được điều gì đó thú vị. Phương thức thêm cho đối tượng chọn javascript trong IE 6 chỉ nhận một tham số. Nó ném một lỗi khi bạn vượt qua nó hai tham số mà tôi tin là standard, ngay cả khi documented trên trang MSDN.

Câu hỏi của tôi là vậy. Đề xuất thực hành tốt nhất của bạn cho các phần tử tùy chọn thêm theo chương trình vào phần tử được chọn trong javascript là gì?

• Gọi phương thức thêm khác nhau dựa trên giá trị của tác nhân người dùng?
• Quấn đối tượng được chọn vào một lớp cung cấp chữ ký phương thức thích hợp?
• Sử dụng thư viện javascript để thực hiện điều này cho bạn (chỉ định thư viện nào)?

Answer 1

Bạn có thể sử dụng một khối try-catch để làm điều này:

   try 
    { 
     //Standards compliant 
     list.add(optionTag, null); 
    } 
    catch (err) 
    { 
     //IE 
     list.add(optionTag); 
    } 

Answer 2

Thêm một loại Lựa chọn mới hoạt động ít nhất là IE6 và lên

function addOption(selectID, display, value) 
{ 
    var obj = document.getElementById(selectID); 
    obj.options[obj.options.length] = new Option(display, value); 
} 

Ngoài ra thử nghiệm trong Firefox 2, 3, Opera 8, 9.5, và Safari 4 thành công. IE4 thất bại :(

Answer 3

$("#selectID").addOption(value, text); 

sử dụng chức năng addOption từ jQuery selectboxes plugin

Answer 4

Như tôi nhớ, IE4 chấp nhận sự sáng tạo của một phần tử tùy chọn và phụ nó, nhưng có lẽ tôi không nhớ nó coorrectly -!)

Answer 5

tôi sẽ đề nghị sử dụng DOM-phương pháp thay thế.

document.createElement('option') 
selectEl.appendChild() 

Không bao giờ có vấn đề với điều đó.

Answer 6

Nếu bạn muốn thêm tùy chọn vào bắt đầu của thả xuống, các biến thể sau đây nên làm điều đó:

try{ 
     list.add(optionTag, 0); 
    } catch (err) { 
     // Firefox is dumb for once: http://www.quirksmode.org/dom/w3c_html.html#selects 
     list.add(optionTag, list.options[0]); 
    } 

Answer 7

Bạn không nên sử dụng phương pháp Select.add, như nó bị hỏng ở IE và có nhiều cách tốt hơn để thêm tùy chọn động (xem http://msdn.microsoft.com/en-us/library/ms535921(VS.85).aspx)

Tôi đã gặp vấn đề tương tự và đã tìm ra cách tốt nhất là sử dụng phương thức Node.insertBefore. Điều này có lợi thế là làm việc trong tất cả các trình duyệt và việc sắp xếp các phần tử dễ dàng, bởi vì bạn không phải thêm phần tử làm phần tử cuối cùng của danh sách chọn trong IE.Ví dụ, thêm một tùy chọn từ một danh sách lựa chọn khác, vì vậy mà các lựa chọn trong danh sách mục tiêu đều được sắp xếp theo thứ tự abc, có thể được thực hiện như thế này:

/* 
adds an option to select element, alphabetically sorted according to the lower case value of the display element (option.text) 
*/ 

function insertOptionToList(optionToInsert, targetSelectElement){ 

    for (var i=0;i<targetSelectElement.options.length;i++){ 
     var tempOptionText = targetSelectElement.options[i].text; 
     if(tempOptionText.length>0 && optionToInsert.text.toLowerCase()<tempOptionText.toLowerCase()){ 
      targetSelectElement.insertBefore(optionToInsert,targetSelectElement[i]); 
      return true; 
     } 
    } 
    targetSelectElement.options[targetSelectElement.options.length] = optionToInsert; 
    return true;       
} 

Answer 8

này làm việc cho tôi

$(selectID).append($('<option>'+display+'</option>').attr('value', value));

Answer 9

Tôi đã tự nghiên cứu sử dụng tất cả hoán vị và kết hợp tạo đối tượng tùy chọn và tôi hy vọng đây là cách tốt nhất có thể để chúng tôi có thể thêm tùy chọn để chọn trong trình duyệt theo cách trung lập:

function populateSelectField() 
{ 

    document.frmMain.fldSelect.options.length = 0; 
    document.frmMain.fldSelect.options[document.frmMain.fldSelect.options.length]=new Option("Your Value 1"); 
    document.frmMain.fldSelect.options[document.frmMain.fldSelect.options.length]=new Option("Your Value 2"); 
    document.frmMain.fldSelect.options[document.frmMain.fldSelect.options.length]=new Option("Your Value 3"); 
    document.frmMain.fldSelect.options[document.frmMain.fldSelect.options.length]=new Option("Your Value 4"); 
} 

Vì đối tượng trường chọn được truy cập và thao tác bằng cách truy cập đối tượng cha mẹ của nó, là "frmMain" (biểu mẫu) trong mã này, nó không tạo ra bất kỳ vấn đề nào cho bất kỳ trình duyệt nào chạy mã.

Điều này được hỗ trợ bởi tất cả các trình duyệt bao gồm cả IE.

Answer 10

(chỉnh sửa: điều này không làm việc trong IE, vì vậy nó không được khuyến khích.)

tôi làm điều đó bằng cách thay đổi innerHTML:

<select id="selectItem"></select> 

var s=document.getElementById("selectItem"); 
s.innerHTML+="<option>apples</option>"; 
s.innerHTML+="<option>bananas</option>"; //(...etc) 

Hoặc đặt nó trong một vòng lặp nếu bạn đang sử dụng một mảng để điền danh sách thả xuống của bạn.