Добавление optgroups для выбора с использованием JavaScript динамически - PullRequest
Новая
       33

Добавление optgroups для выбора с использованием JavaScript динамически

9 голосов
/ 05 февраля 2010

У меня есть динамически заполняемое (с помощью 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 ]

8 голосов
/ 05 февраля 2010

Вы можете сделать это на месте, используя 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, на основе текста в опциях.

5 голосов
/ 05 февраля 2010

Это не слишком сложно, вам нужно только немного передвигаться по вашим опциям. Выньте их из потока документов, добавьте 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]);
}
...