Добавление optgroups для выбора использования JavaScript динамично
Я имею динамично заполненный (ajax) избранное поле с получающимися опциями как этот:
<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>
... существует на самом деле больше из них, но не сущности
Вещь, которую я хочу, состоит в том, чтобы сгруппировать каждые эти две опции части optgroup использование JavaScript (использующий JQuery или Mootools, возможно) после того, как список загружается, так, чтобы перед каждой этой группой - мы добавили тег optgroup с маркировкой, которую мы получаем от второго HTML опции группы (на самом деле слово перед тире):
<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>
Хотя, всегда существует два места назначения в каждой группе.
Совет, как реализовать этот Заранее спасибо.
2 ответа
Вы можете сделать это на месте с помощью 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);
}
});
});
Этот код выполняет итерацию по всем параметрам в теге select и объединяет каждый набор из двух в optgroup. Он также определяет, как пометить optgroup на основе текста в параметрах.
Это не так сложно, вам нужно лишь немного изменить параметры. Выньте их из потока документов, добавьте optgroup вместо двух связанных опций и добавьте опции в эту optgroup.
Предполагая, что параметры на самом деле являются последовательными, как в вашем примере, возможная, старая добрая реализация сценария DOM выглядит следующим образом:
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]);
}