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

#javascript #jquery #css #xml #optgroup

Вопрос:

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

1. JavaScript предназначен для поведения; CSS для представления.

2. Можете ли вы более четко объяснить, чего вы хотите, имея в виду, что никто другой на самом деле не знает, что вы делаете? Может быть, пример кода или демонстрация ? Похоже , вам действительно нужно решение исходной проблемы, а не взлом CSS / JS для ее решения.

3. @WesleyMurch: я настроил скрипку здесь: jsfiddle.net/uAhC2/5 На самом деле я не уверен, как настроить xml в fiddle, так что вроде бы это не работает на fiddle, но на моем локальном компьютере это работает. Я хочу, чтобы в выпадающем списке также были теги optgroup. Нужно ли мне изменять xml или вы бы предложили поместить его локально в html, в идеале я хотел бы иметь его в xml. Спасибо, что предложили помощь

Ответ №1:

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

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

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

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

Редактировать: на основе предоставленной вами скрипки я изменил ваш код jQuery, чтобы создать optgroup перед параметрами. Это не самый эффективный способ, но он должен помочь вам начать работу на основе того, что вы предоставили. См. 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);
            }
        });
}

1. Можете ли вы обратиться к этой скрипке и помочь: мои параметры поступают из xml, а не вручную, как вы говорите: jsfiddle.net/uAhC2/5

2. Я исправил скрипку, чтобы она действительно работала с предоставленным вами XML. Дайте мне знать, если это было то, что вы искали.