0

我实际上是从 xml 为我的下拉列表填充选项，现在添加一个 optgroup 来选择是一个挑战。我可以手动添加它们并通过 css 更改行为吗

4

1 回答 1

1

您可以在使用 jQuery 之后手动将选项和 optgroups 添加到选择框。假设您的 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 代码以在选项之前构建 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);
            }
        });
}
于 2011-10-22T17:30:24.210 回答