标签: optgroup

我正在开发一个下拉菜单,该菜单使用HTML optgroups来处理员工所属的组名.这是MySQL查询和输出:

mysql> SELECT employees.emp_id,employees.empname,employees.grp_id,groups.groupname FROM employees left join groups on employees.grp_id = groups.grp_id order by groupname asc;
+--------+------------+--------+-----------+
| emp_id | empname    | grp_id | groupname |
+--------+------------+--------+-----------+
|     20 | Employee 2 |     13 | Group 1   |
|     19 | Employee 1 |     13 | Group 1   |
|     21 | Employee 3 |     14 | Group 2   |
+--------+------------+--------+-----------+
3 rows in set (0.00 sec)

唯一的问题是,我正在努力弄清楚如何让optgroup正常工作.我已经尝试了无数次,而且它真的开始让我感到沮丧.以下几乎是我希望输出为(示例):

<select name="dropdownmenu">
    <optgroup label="Group 1">
        <option name="20">Employee 2</option>
        <option …

我有一个选择框,我可以在其中选择多个选项.在选择框中有多个optgroups.有没有一种简单的方法可以在javascript中一次选择整个optgroup？

我有一个非常类似的下拉列表:

<select id='someSelect'>
    <option value="0">---select one---</option>
    <optgroup label="Bikes">
        <option value="B-4">Hayabusa</option>
        <option value="B-2">GSXR</option>
        <option value="B-3">Ninja</option>
        <option value="B-6">Enticer</option>
    </optgroup>
    <optgroup label="Cars"> 
        <option value="C-4">Audi TT</option>
        <option value="C-2">Awesome Car</option>
        <option value="C-23">Japanese car</option>
        <option value="C-9">German car</option>
    </optgroup>
</select>

我只想选择第一组的第一个元素(这里是自行车).我如何在jQuery中解决它？

目前,我试过这个:

$('#someSelect option:nth-child(1)').attr("selected", "selected");

BUT,麻烦的是,由于有三个第一元件(--select--,Hayabusa和Audi TT)它选择所有三个,这finaly选择Audi TT

我尝试做一些东西each并选择第二个,但后来我意识到下拉是动态的,我不想选择默认的(这是--select one--)但是第一组的第一个元素

我试图模仿一个jsfiddle,但它已经搞砸了,不能正常工作,不知道为什么: - /
你可以在这里看到它

我正在寻找<select>使用wicket在我的页面中呈现标签,但是将选项分组<optgroup>,这在Wicket DropDownChoice中的Separator上进行了讨论,但在解决方案中<optgroup>假设<optgroup>标签是静态的,我想要同时使用数据库中的选项和组.

我用于下拉列表的代码是这样的:

<%= f.select :post_type_id, option_groups_from_collection_for_select(@categories, :post_types, :name, :id, :name) %>

它巧妙地将选项划分为optgroups.

但是如何修改代码以包含"请选择..."的提示(或默认值)？

分组下拉列表似乎很难做到.(rails docs似乎建议使用哈希,但我尝试了几种替代方案但没有成功.)

我正在使用带有optgroups的select来在移动设备上进行一些导航.我使用optgroup的标签来表示它所属的部分 - 然后选项本身来指定子部分.

问题是,当select不在焦点时,我遇到的几乎所有浏览器都没有显示optgroup.我通过编写以下jQuery解决了这个问题:

$(".Nav-Interior-Mobile select option:selected").each( function() {
    pageGroupLabel = $(this).parent('optgroup').attr('label');
    pageItemLabel = $(this).text();
    $(this).text(pageGroupLabel + " > " + pageItemLabel);
});
$('.Nav-Interior-Mobile select').focus( function() {
    $(this).find('option:selected').text(pageItemLabel); 
});
$('.Nav-Interior-Mobile select').blur( function() {
    $(this).find('option:selected').text(pageGroupLabel + " > " + pageItemLabel); 
});

这似乎适用于除iOS之外的所有内容.在iOS中,更改选择的UI不会反映在焦点上使用的新文本.我可以看到Apple的UI改变之上的实际选择 - 但他们的UI根本没有改变.

任何人都知道如何做到这一点？

这里模糊时工作:

并且在专注时不工作(当它应该只是说"Web"时,他们的UI仍然具有"品牌> Web"):

这绝对是一个错误 - 如果你向下滚动然后在列表中备份 - 然后文本被更改 - 奇怪.

我正在尝试使用Serge Zab的optgroup下拉助手,可以在这里找到.

这是我的类别表:

如您所见,我有一个类别,类别也可以是类别中的categoryparent.我希望将parentcategorys作为optgroup,将子项作为optgroup的选项.(只能选择孩子)

在我的ViewModel中:

public short? CategoryId { get; set; }
public IEnumerable<ReUzze.Helpers.GroupedSelectListItem> GroupedTypeOptions { get; set; }

在我的控制器中:

[Authorize] // USER NEEDS TO BE AUTHORIZED
public ActionResult Create()
{
    ViewBag.DropDownList = ReUzze.Helpers.EnumHelper.SelectListFor<Condition>();

    var model = new ReUzze.Models.EntityViewModel();
    PutTypeDropDownInto(model);
    return View(model);
}

[NonAction]
private void PutTypeDropDownInto(ReUzze.Models.EntityViewModel model)
{
    model.GroupedTypeOptions = this.UnitOfWork.CategoryRepository.Get()
         .OrderBy(t => t.ParentCategory.Name).ThenBy(t => t.Name)
         .Select(t => new GroupedSelectListItem
         {
             GroupKey = t.ParentId.ToString(),
             GroupName = t.ParentCategory.Name,
             Text = t.Name,
             Value = t.Id.ToString()
         }
     );
}

在我看来: …

ELLO,

我已经尝试了所有选项来制作一个带有optgropus的(多个)选择框,并将选项/ selectedOptions与knockout绑定.

selectedOptions绑定似乎存在问题.我的数据似乎是合法的,但它不会显示预选的选项.

我在JSFiddle中做了一个例子:http://jsfiddle.net/aCS7D/251/

<select data-bind="selectedOptions: selectedOptions" multiple="multiple">
<option>Please choose an option</option>
<optgroup data-bind="repeat: groups" data-repeat-bind="attr: {label: $item().label}">
    <option data-bind="repeat: $item().children" data-repeat-bind="text: $item().label, option: $item()"></option>
</optgroup>

使用单个选定选项它可以工作,但是有多个选择选项,选择框不能正确渲染它们.

如果任何人有解决这个问题的方法,你将成为我的英雄!

我需要去掉 optgroups 中的标签。

从这里：http : //i.stack.imgur.com/Gn5e5.png

成这个：http : //i.stack.imgur.com/ZvRM7.png

但我需要用 opgroups 来做到这一点。我不想删除它们。

<select>
  <optgroup>
    <option>1</option>
  </optgroup>
  <optgroup>
    <option>2</option>
  </optgroup>
  <optgroup>
    <option>3</option>
  </optgroup>
  <optgroup>
    <option>4</option>
  </optgroup>
</select>

jsfiddle：http : //jsfiddle.net/upXn8/

我有一张表格，下面附有屏幕截图

我想显示所有帐户类型，但它应该显示在选项组中

我怎样才能实现这个目标？？？