Можно ли сделать так, чтобы опция выбора выпадала отображалась как optgroup через css - PullRequest
Новая
       6

Можно ли сделать так, чтобы опция выбора выпадала отображалась как optgroup через css

0 голосов
/ 22 октября 2011

Я на самом деле заполняю опции из xml для моего выпадающего списка, и теперь добавление optgroup для выбора является проблемой. Можно ли добавить их вручную и изменить поведение с помощью css

1 Ответ

1 голос
/ 22 октября 2011

Вы можете добавить опции и оптгруппы в поле выбора вручную после факта с помощью jQuery. Предполагая, что ваш HTML уже доступен, вы можете сделать что-то вроде этого: 

$("select").append("<optgroup label='Example'><option>Test1 </option> <option>Test 2</option></optgroup>")

Если у вас уже есть опции в элементе select, тогда нужно просто найти все те опции, которые вы хотели бы сгруппировать (возможно, с помощью имени класса или атрибута значения), а затем поместить их в заново создайте optgroup, затем добавьте optgroup в список выбора. Пример: 

var optionsToGroup = $("option.groupthis");
var optGroup = $("<optgroup></optgroup>").append(optionsToGroup);
$('select').append(optGroup);

Редактировать: Основываясь на предоставленной вами скрипте, я изменил ваш код jQuery, чтобы создать оптгруппу перед опциями. Это не самый эффективный способ, но вы должны начать с того, что предоставили. Смотри http://jsfiddle.net/xUJZj

var title = $(this).find('title').text();
var optgrouping = "<optgroup label='"+title+"'></optgroup>";
var options = [];
$(this).find('value').each(function(){
          var value = $(this).text();
          options.push("<option class='ddindent' value='"+ value +"'>"+value+"</option>");
 });
  var grouping = $(optgroupting).html(options.join(''));
  select.append(grouping);

Редактировать 2: Я изменил JSFiddle для использования фактического документа XML (аналогично тому, что вы предоставили). Смотрите здесь: http://jsfiddle.net/xUJZj/13/ Или соответствующий измененный код приведен ниже: 

function createSelect(xml)
{
                var select = $('#mySelect');
                $(xml).find('menuitem').each(function(){
                    var title = $(this).find('title').text();
                    var optgrouping = "<optgroup label='"+title+"'></optgroup>";
                    var options = [];
                    $(this).find('value').each(function(){
                        var value = $(this).text();
                        options.push("<option class='ddindent' value='"+ value +"'>"+value+"</option>");
                    });
                    var group = $(optgroupting).html(options.join(''));
                    select.append(group);
                });
                select.children(":first").text("please make a selection").prop("selected",true);
            }
        });
}
...