Thêm optgroups để chọn sử dụng javascript động

Question

Tôi đã một động dân cư (bằng ajax) chọn hộp với các tùy chọn kết quả như thế:

<select id="destination" name="destination"> 
<option value="london-paris">London-Paris</option> 
<option value="paris-london">Paris-London</option> 

<option value="london-newyork">London-New-York</option> 
<option value="newyork-london">New-York-London</option> 

<option value="london-berlin">London-Berlin</option> 
<option value="berlin-london">Berlin-London</option> 

<option value="london-helsinki">London-Helsinki</option> 
<option value="helsinki-london">Helsinki-London</option> 

... có thực sự có nhiều trong số họ nhưng không phải là Điều tôi muốn là nhóm mỗi hai phần tùy chọn này bằng cách chọn nhóm bằng cách sử dụng Javascript (sử dụng Jquery hoặc Mootools) sau khi danh sách được tải, để trước mỗi nhóm - chúng tôi thêm một thẻ nhóm với nhãn chúng tôi nhận được từ tùy chọn thứ hai html của g roup (thực sự là từ trước dấu gạch ngang):

<select id="destination" name="destination"> 
<optgroup label="Paris"> 
<option value="london-paris">London-Paris</option> 
<option value="paris-london">Paris-London</option> 
</optgroup> 
<optgroup label="New-York"> 
<option value="london-newyork">London-New-York</option> 
<option value="newyork-london">New-York-London</option> 
</optgroup> 
<optgroup label="Berlin"> 
<option value="london-berlin">London-Berlin</option> 
<option value="berlin-london">Berlin-London</option> 
</optgroup> 
<optgroup label="Helsinki"> 
<option value="london-helsinki">London-Helsinki</option> 
<option value="helsinki-london">Helsinki-London</option> 
</optgroup> 
</select> 

Mặc dù, luôn có hai điểm đến trong mỗi nhóm.

Vui lòng, tư vấn cách triển khai Cảm ơn bạn trước.

Answer 1

Bạn có thể làm điều này tại chỗ sử dụng jQuery:

$(document).ready(function() { 
    var select = $('#destination'); 
    var opt1, opt2; 
    $('option', select).each(function(i) { 
     if (i % 2 === 0) { 
      opt1 = $(this); 
     } else { 
      opt2 = $(this); 
      var label = opt1.text().replace('London-', ''); 
      var optgroup = $('<optgroup/>'); 
      optgroup.attr('label', label); 
      opt2.add(opt1).wrapAll(optgroup); 
     } 

    }); 
}); 

Mã này lặp qua tất cả các tùy chọn trong thẻ chọn và kết thúc tốt đẹp mọi bộ trong hai nhóm trong một nhóm chọn. Nó cũng tìm ra những gì để gán nhãn cho nhóm như, dựa trên văn bản trong các tùy chọn.

Answer 2

Điều này không quá phức tạp, bạn chỉ cần di chuyển xung quanh các tùy chọn của mình một chút. Đưa chúng ra khỏi dòng tài liệu, thêm một nhóm tùy chọn vào vị trí của hai tùy chọn liên quan và nối thêm các tùy chọn cho nhóm chọn đó.

Giả sử rằng các tùy chọn là thực sự liên tục, như trong ví dụ của bạn, một có thể, tốt cũ thực hiện DOM scripting như sau:

var destinationSelect = document.getElementById("destination"); 
var options = destinationSelect.getElementsByTagName("option"); 

var optgroups = []; 

while(options.length > 0) { 

    var option1 = options[0]; 
    var option2 = options[1]; 
    var optgroup = document.createElement("optgroup"); 
    var label = option1.innerHTML.replace(/^[^\-]-/, ""); 
    optgroup.setAttribute("label", label); 
    destinationSelect.removeChild(option1); 
    destinationSelect.removeChild(option2); 
    optgroup.appendChild(option1); 
    optgroup.appendChild(option2); 

    optgroups.push(optgroup); 
} 

for(var i = 0; i < optgroups.length; i ++) { 
    destinationSelect.appendChild(optgroups[i]); 
}