当前位置：文江博客话题详情

是否可以通过 css 使选择下拉列表的选项显示为 optgroup

发布于 2024-12-11 18:38:48 字数 76 浏览 1 评论 0原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

微暖i 2024-12-18 18:38:48

您可以使用 jQuery 手动将选项和 optgroup 添加到选择框。假设您的 HTML 已经可用，您可以执行以下操作：

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

如果您在 select 元素中已有选项，那么只需找到您想要分组的所有选项（通过类名或value 属性，也许），然后将它们推送到新创建的 optgroup 中，然后将 optgroup 附加到选择中。示例：

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

编辑：根据您提供的 Fiddle，我修改了您的 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);
            }
        });
}

You can add options and optgroups to the select box manually after the fact with jQuery. Assuming your HTML is already available, you could do something like this:

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

If you already have options in the select element, then it would just be a matter of finding all of those options that you would like to group up (via a class name or value attribute, perhaps), then pushing them into a newly create optgroup, then appending the optgroup into the select. Example:

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

Edit: Based on the Fiddle you've provided, I modified your jQuery code to build the optgroup before the options. This isn't the most efficient way, but it should get you started based on what you've provided. See 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);

Edit 2: I've modified the JSFiddle to use an actual XML doc (similar to what you provided). See it here: http://jsfiddle.net/xUJZj/13/
Or, the relevant modified code is here below:

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);
            }
        });
}

回复收藏 0 原文

~没有更多了~