我创建了一个客户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行为?
有没有办法让选项组可选?
<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) 有没有办法隐藏option
或optgroup
HTML元素?我试过调用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) 在Symfony2中,select
html组件呈现为一个ChoiceType
对象,实际上也用于checkboxes
和radiobuttons
.
有人真的知道如何使用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)
此外,请注意,有一个类似的帖子在这里,但答案是没有说服力的.
我正在使用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块,我已经尝试了一般margin-left
规则,嵌套元素然后尝试应用相同的规则,尝试过padding-left
......这样的缩进是可能的吗?看起来很简单:P
在下面的示例中,标记为"client2_a"的optgroup应缩进比其他标记更多,因为它嵌套在"client2"中.
我想知道是否有人可以解决这个问题..
我有一个选项组下拉列表用于选择一个人的种族 - 但是它没有将值存储在模型中.
视图模型
[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) 我正在使用多选集合在一起的选项.
<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?
我有点失落.我得到这个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) 在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)
这个问题是没有办法从我能说的内容中指定用作显示文本的列.我欢迎任何意见.
optgroup ×10
html ×4
jquery ×3
html-select ×2
angularjs ×1
css ×1
forms ×1
indentation ×1
javascript ×1
json ×1
multi-select ×1
option ×1
php ×1
select ×1
simple-form ×1
symfony ×1