标签: optgroup

将optgroups嵌套在下拉列表中/选择

我创建了一个客户c#DropDownList控件,它可以呈现出来的内容是optgroups(不是从头开始,我编辑了一些在互联网上找到的代码,虽然我确实理解它正在做什么),但它工作正常.

但是,我现在遇到的情况是我需要在下拉列表中有两个级别的缩进,即

<select>
  <optgroup label="Level One">
    <option> A.1 </option>
    <optgroup label="Level Two">
      <option> A.B.1 </option>
    </optgroup>
    <option> A.2 </option>
  </optgroup>
</select>
Run Code Online (Sandbox Code Playgroud)

但是,在上面的示例代码段中,它呈现为好像Level Two与缩进量相同Level One.

有没有办法生成我正在寻找的嵌套optgroup行为?

html optgroup

73
推荐指数
7
解决办法
11万
查看次数

HTML <select>标签中的可选<optgroup>

有没有办法让选项组可选?

<select>
   <optgroup value="0" label="Parent Tag">
      <option value="1">Child Tag</option>
      <option value="2">Child Tag</option>
   </optgroup>
</select>
Run Code Online (Sandbox Code Playgroud)

html html-select optgroup

62
推荐指数
4
解决办法
8万
查看次数

如何隐藏optgroup/option元素?

有没有办法隐藏optionoptgroupHTML元素?我试过调用hide()jQuery,还使用常规Javascript来设置style.display='none'.

它适用于Firefox,但不适用于任何其他浏览器.实际上从DOM 删除它们确实有效,所以也许有一种方法可以在删除每个DOM元素时保存它们,并将它们重新插入到同一个地方?

我的HTML是这样的:

<select name="propsearch[area]" id="propsearch_area">
    <option value="0">- Any -</option>
    <optgroup label="Bristol">
        <option  value="Hotwells">Hotwells</option>
        <option  value="Montpelier">Montpelier</option>
    </optgroup>
    <optgroup label="Cardiff">
        <option  value="Heath">Heath</option>
        <option  value="Roath">Roath</option>
    </optgroup>
    <optgroup label="Exeter">
        <option  value="Pennsylvania Road">Pennsylvania Road</option>
        <option  value="Lower North Street">Lower North Street</option>
    </optgroup>
    <optgroup label="Swansea">
        <option  value="Brynmill">Brynmill</option>
        <option  value="Uplands">Uplands</option>
    </optgroup>
</select>
Run Code Online (Sandbox Code Playgroud)

html javascript jquery option optgroup

29
推荐指数
1
解决办法
2万
查看次数

在Symfony 2.0中选择optgroup

Symfony2中,selecthtml组件呈现为一个ChoiceType对象,实际上也用于checkboxesradiobuttons.

有人真的知道如何使用Symfony2中的optgroup选项呈现选择吗?

为了完整起见,我在这里报告了一个带有optgroup标签的选择示例(来自w3cschools的示例):

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select> 
Run Code Online (Sandbox Code Playgroud)

此外,请注意,有一个类似的帖子在这里,但答案是没有说服力的.

php forms html-select optgroup symfony

20
推荐指数
2
解决办法
1万
查看次数

在angularjs中添加optgroups证明是棘手的

我正在使用angularjs,我一直在努力创建一个过去2天的optgroup,同时处理其他一些东西,我很难过.我不得不创建一个ng-options,但直到我意识到我需要一个选项组才考虑.我尝试使用ng-options将其添加进去,但它会完全忽略它,弄乱代码或完全忽略选项.

我不知道我是否真的可以使用(双)&符号,所以我尝试结合两个ng-options,但无济于事.此外,我玩弄了odetocode中的特定代码(这似乎很有希望,但由于其自身有限的结构,无法与我的代码合并).

我试过的一切都破坏了我的代码.原始代码在下面(我的许多其他mod之前的代码),但我也有它的plunker:

http://plnkr.co/edit/xCLe2GFShUMUlIySPLH9?p=info

HTML

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
    <script src="script.js"></script>
  </head>

  <body>


  <form name="FORM" ng-controller="appController">
<the-ratings  model="review.ratings">         
</the-ratings>
</form>

  </body>

</html>
Run Code Online (Sandbox Code Playgroud)

JS

(function(){

var app = angular.module('myApp',[]);

app.controller('appController', ['$scope', function($scope) {
      $scope.review = {};
      $scope.review.ratings = '5 stars';
  }])
  app.directive('theRatings', function() {

    return {
      restrict: 'E',
      scope: { model: '=' },
      template: '<select ng-model="model" ng-options="option.name as option.value for option in options"></select>',
      controller: function($scope) {
        $scope.options = [
            { name:'test', namegroup: 'Rate the product', …
Run Code Online (Sandbox Code Playgroud)

optgroup angularjs

15
推荐指数
2
解决办法
1万
查看次数

如何使用CSS缩进多个级别的select optgroup?

只是试图通过嵌套深度来缩进optgroup块,我已经尝试了一般margin-left规则,嵌套元素然后尝试应用相同的规则,尝试过padding-left......这样的缩进是可能的吗?看起来很简单:P

在下面的示例中,标记为"client2_a"的optgroup应缩进比其他标记更多,因为它嵌套在"client2"中.

http://jsfiddle.net/Tb5Rc/5/

html css select indentation optgroup

14
推荐指数
3
解决办法
7万
查看次数

MVC中的Optgroup下拉支持 - 模型绑定问题

我想知道是否有人可以解决这个问题..

我有一个选项组下拉列表用于选择一个人的种族 - 但是它没有将值存储在模型中.

视图模型

    [UIHint("EthnicOriginEditorTemplate")]
    [DisplayName("Question 6: Ethnic Origin")]
    public int EthnicOrigin { get; set; }
Run Code Online (Sandbox Code Playgroud)

助手:GroupDropList.Cs

using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web.Mvc;
using System.Web.Routing;

namespace Public.Helpers
{
    public static class GroupDropListExtensions
    {
        public static string GroupDropList(this HtmlHelper helper, string name, IEnumerable<GroupDropListItem> data, int SelectedValue, object htmlAttributes)
        {
            if (data == null && helper.ViewData != null)
                data = helper.ViewData.Eval(name) as IEnumerable<GroupDropListItem>;
            if (data == null) return string.Empty;

            var select = new TagBuilder("select");

            if (htmlAttributes != null)
                select.MergeAttributes(new …
Run Code Online (Sandbox Code Playgroud)

optgroup asp.net-mvc-2 drop-down-menu

11
推荐指数
2
解决办法
3630
查看次数

如何在jQuery中获得多选的optgroup?

我正在使用多选集合在一起的选项.

<select title="Fruits" multiple="multiple" id="fruits" name="fruits[]">
    <option selected="selected" label="All" value="">All</option>
    <optgroup label="" class="fruit">
        <option label="apple" value="1">Apple</option>
        <option label="pear" value="2">Pear</option>
        <option label="orange" value="3">Orange</option>
    </optgroup>
    <optgroup label="" class="berries">
        <option label="strawberry" value="4">Strawberry</option>
        <option label="raspberry" value="5">Raspberry</option>
        <option label="blueberry" value="6">Blueberry</option>
    </optgroup>
</select>
Run Code Online (Sandbox Code Playgroud)

我已经尝试过$(this).find("option:selected").parent().attr("label")只返回第一个选定选项的optgroup,这意味着如果选择了Strawberry和Pear,那么两个账户都将返回optgroup'.fruit'.

使用jQuery,如何获得每个选定选项的optgroup?

jquery multi-select optgroup

11
推荐指数
1
解决办法
2万
查看次数

GroupBy在JavaScript中对JSON数据进行分组并填充在optgroup上

我有点失落.我得到这个JSON:

[{
    "id": "210",
    "name": "Name 1",
    "category": "Category 1"
}, {
    "id": "187",
    "name": "Name 2",
    "category": "Category 1"
}, {
    "id": "186",
    "name": "Name 3",
    "category": "Category 1"
}, {
    "id": "185",
    "name": "Name 4",
    "category": "Category 1"
}, {
    "id": "184",
    "name": "Name 5",
    "category": "Category 1"
}, {
    "id": "183",
    "name": "Name 6",
    "category": "Category 1"
}, {
    "id": "182",
    "name": "Name 7",
    "category": "Category 1"
}, {
    "id": "181",
    "name": "Name 8",
    "category": "Category 2" …
Run Code Online (Sandbox Code Playgroud)

jquery json optgroup

11
推荐指数
2
解决办法
2万
查看次数

创建一个optgroup在Rails 3.2上使用simple_form gem

http://simple-form.plataformatec.com.br/#usage/collections的 simple_form 2.0中,似乎只有一些关于grouped_select功能的文档.文档提供了以下内容:

f.input :country_id, :collection => @continents, :as => :grouped_select, :group_method => :countries
Run Code Online (Sandbox Code Playgroud)

但这似乎并没有给我足够的背景来使其发挥作用.这就是我所拥有的.

我有三种模式:查询,广告和插入

广告has_many插入和插入belongs_to广告查询belongs_to插入和插入has_many查询

此下拉列表用于查询视图.使用simple_form我可以= f.input :insertion, :collection => @ads至少在下拉列表中输出广告标题列表.我希望ad.title可以作为optgroup.然后我想将广告插入作为可选择的内容...所以类似于:

<select>
  <optgroup label="Ad.Title">
    <option value="Ad.Insertion.id">Ad.Insertion.Title</option>
    <option value="Ad.Insertion.id">Ad.Insertion.Title</option>
    <option value="Ad.Insertion.id">Ad.Insertion.Title</option>
    <option value="Ad.Insertion.id">Ad.Insertion.Title</option>
  </optgroup>
  <optgroup label="Ad.Title">
    <option value="Ad.Insertion.id">Ad.Insertion.Title</option>
    <option value="Ad.Insertion.id">Ad.Insertion.Title</option>
    <option value="Ad.Insertion.id">Ad.Insertion.Title</option>
    <option value="Ad.Insertion.id">Ad.Insertion.Title</option>
  </optgroup>
</select>
Run Code Online (Sandbox Code Playgroud)

任何人都可以提供有关使这个simple_form功能有效的建议吗?我真的很感激!

如果您对如何执行此属性有所了解,请告诉我是否可以告诉您有关该应用程序的任何其他信息.

提前致谢!

更新:我已经能够使用以下部分工作:

= f.input(:insertion_id, :collection => Ad.order(:name), :as => :grouped_select, :group_method => :insertions)
Run Code Online (Sandbox Code Playgroud)

这个问题是没有办法从我能说的内容中指定用作显示文本的列.我欢迎任何意见.

ruby-on-rails optgroup simple-form

10
推荐指数
1
解决办法
5784
查看次数