如何使用CSS缩进多个级别的select optgroup？
要使用CSS缩进多个级别的select optgroup，可以通过以下步骤实现：
- 首先，为select元素创建一个CSS类或ID选择器，并设置其样式为
position: relative，以便在后续步骤中定位optgroups。 - 然后，为每个optgroup元素创建一个CSS类或ID选择器，并设置其样式为
padding-left，以实现缩进效果。可以根据需要调整缩进的像素值。 - 接下来，使用CSS选择器将每个optgroup元素与其父级select元素关联起来，并设置其样式为
position: absolute和left: 0，以确保它们相对于select元素左对齐。 - 最后，将每个optgroup元素的缩进样式应用到其对应的CSS类或ID选择器上。
以下是一个示例代码：
<style>
.select-wrapper {
position: relative;
}
.optgroup-level-1 {
padding-left: 10px;
}
.optgroup-level-2 {
padding-left: 20px;
}
/* 更多级别的缩进样式可以根据需要添加 */
.select-wrapper optgroup {
position: absolute;
left: 0;
}
</style>
<div class="select-wrapper">
<select>
<optgroup label="Level 1" class="optgroup-level-1">
<option>Option 1</option>
<option>Option 2</option>
</optgroup>
<optgroup label="Level 2" class="optgroup-level-2">
<option>Option 3</option>
<option>Option 4</option>
</optgroup>
</select>
</div>在上述示例中，我们创建了一个名为.select-wrapper的CSS类，用于包裹select元素。然后，我们为每个级别的optgroup元素创建了对应的CSS类（.optgroup-level-1和.optgroup-level-2），并设置了不同的缩进样式。最后，我们使用CSS选择器将每个optgroup元素与其父级select元素关联起来，并设置其定位样式。
请注意，这只是一种实现多级缩进的方法之一，具体的实现方式可能因项目需求而有所不同。此外，腾讯云并没有特定的产品与CSS缩进多个级别的select optgroup直接相关联。
相关·内容
2回答
选择optgroup标题作为选项
、、、、
我在下拉列表中有一个这样组织的数据树(但有更多选项)：
pizza
pizza.mediterranean
pizza.veggie
pizza.meatlover
drinks
drinks.soda
drinks.soda.pepsi
drinks.soda.coke
drinks.beer
drinks.water
我希望较大的类别(披萨，饮料)显示为optgroup，但我希望能够选择一个optgroup作为下拉列表中的一个选项。我在多个地方读到的是optgroup只用于分组，不能被选择。
由于我还想要多个级别的缩进，以使下拉列
浏览 0提问于2012-07-14得票数 0
回答已采纳
1回答
嵌套下拉格式的错误
、、、
我有嵌套下拉列表&有超过2次嵌套项的格式问题。我很肯定我的“蒙娜丽莎”用油漆制成的高质量的图像将完美地证明它。
我正在寻找任何建议，以改变我的代码，使其正常工作。
关于我的问题的图片：
代码：
<div class="form-group">
<label for="p-location"><?php _e( 'Location', 'tt' ); ?></label>
<select
浏览 5提问于2015-11-29得票数 0
回答已采纳
2回答
如何对提交到sql数据库文章进行分类，以便当用户想要将文章发布到某个类别时，会给出一个下拉菜单来选择要在该类别中发布的文章。about us、products和support就是这些类别的示例
<form method="post" action="postArticle.php">
<p>
<select name="selectedOption">
<optgroup label="About us">
<option val
浏览 3提问于2012-02-10得票数 5
我正在尝试编写一个脚本，它将接受用户输入他们想去的地方，从国家开始。然后接受用户的输入，更新我的列表，列出哪个州在哪个国家，哪个城市在这个州和国家。
我的后端使用python/psp，前端使用html。我在我的网站上更新这个页面时遇到了问题。有人能帮上忙吗？
<div id="content">
<p>
Where would you like to go?
</p>
<form method="post" action="http://localhost/list2.psp">
Places
浏览 2提问于2011-08-23得票数 2
我有一个下拉式的搜索装置。方法是单击一个选项，然后出现OPTGROUP。我想做的是，一旦标签被选中，它就跳到OPTGROUP的那个部分。
到目前为止，我已经写了一些jQuery。看到这个 -所以一旦你选择了一个主类别。我想让视光组去它的配对标签。我怎样才能做到这一点？
<select id="category" name="category">
<option selected="selected" value="0">Choose a category...</option>
...
浏览 6提问于2012-06-07得票数 6
2回答
我有一排桌子，看起来像
HTML看起来像
当用户更改Name字段的值时，我将"select“传递给nameDropChanged函数。在获得对select的引用后，我想要更改优惠券数量的值。如何使用Jquery获得对它的引用？此外，表中还会有许多这样的确切行。
更新:这里是虚拟的HTML代码和
<table id="competitors_table" width="100%" style="border-bottom: #000000 solid 1px;">
<tbody>
<
浏览 4提问于2013-10-21得票数 0
回答已采纳
我有一个选择结构：
<select id="select-service" class="required span4" multiple="">
<optgroup label="Capelli">
<option selected="false" value="14">Colore capelli</option
</optgroup>
<optgroup la
浏览 4提问于2015-11-13得票数 1
回答已采纳
1回答
如何制作多级组合框。这里我使用了以下html代码：
<select name="comboName" class="droplist droplist-by-select">
<optgroup label="1">
<optgroup label="1.1">
<option value="1.1.1"> 1.1.1 </option>
浏览 0提问于2012-04-08得票数 1
1回答
是否可以生成select like： <select>
<option value>Some nill value label</option>
<option value="1">Option one</option>
<optgroup label="Option Group 1" class="css-class-for-option-group-1">
<option value="1:1">Option one in
浏览 6提问于2019-06-11得票数 1
回答已采纳
1回答
自定义HTML选择选项
、、、
我正在尝试使用分组选项进行选择，但是这个组也应该是可选的。
标准选择OPTGROUP选项不可选。我尝试使用select2或选择插件。可以在这里选择组，但是om选择组中的所有选项，它看起来像是一个多选择(解决方案 )。但是我需要选择optgroup (没有multiselect)并在服务器端处理它。
我的意图是自定义组-项目分别，并显示他们作为optgroup，但保持行为作为选择。是否可以单独自定义选择选项？
有什么想法吗？
浏览 4提问于2016-04-11得票数 0
回答已采纳
1回答
如何将样式放在select标签中的optgroup上？
js：
$('<select></select>').appendTo('body').append('<option value="0">test</option>')
.append($('<optgroup label="group"></optgroup>')
.append('<option value="1
浏览 0提问于2011-08-21得票数 4
回答已采纳
我有一个具有OptGroups的多选择列表，如下所示：
<select multiple="multiple" id="idCountry">
<optgroup label="ASIA">
<option value="AUSTRALIA">AUSTRALIA</option>
<option value="CHINA">CHINA</option>
</optgroup>
<
浏览 3提问于2015-04-28得票数 1
回答已采纳
1回答
在最近的一个项目中，我发现他们使用的是智能，客户需要一个3级的选项组。我从来没有使用过聪明，我觉得这个特殊的案例有点难以从零开始。
我需要做下一件事，但要聪明：
<select>
<optgroup label="Level One"></optgroup>
<optgroup label="Level Two" style="padding-left:15px"></optgroup>
<option style="padd
浏览 2提问于2011-10-25得票数 2
回答已采纳
我有一个有多个选择组的选择
例如
<select id="Numbers">
<option value="0">Select One</option>
<optgroup label="A" id="A">
<option value="123">123</option>
<option value="456">456</option>
浏览 4提问于2014-03-05得票数 3
回答已采纳
我有下面的代码，我使用了clone()和delegate()。正在使用链接在jQuery UI对话框中加载代码。问题是Ajax被正确地触发了，它像它所想的那样调用了成功的方法，但是没有显示Ok或noOk div，我的意思是警报触发了，但是div的css没有改变，你认为我的问题出在哪里？选择器有什么问题吗？谢谢
<input id="TaskId" name="TaskId" type="hidden" value="18" />
<div id="MainDiv">
浏览 0提问于2012-06-25得票数 0
回答已采纳
我是新的角，并试图制作一个基本的原型，以销售公司使用AngularJS。我已经掌握了所有的基本知识，但为了满足市场营销想要在某些下拉列表中显示选项的方式，我遇到了麻烦。他们想要这样的视觉效果(没有子弹)，其中粗体的项目是optgroup元素：
青铜
白色
米色
TwoTone
WhtExt
W Ext/Brz Int
W Ext/Drk Oak Int
- **BrzExt**
- Brz Ext/Wht Int
- Brz Ext/Drk Oak Int
HTML如下所示：
<fields
浏览 0提问于2015-10-09得票数 0
回答已采纳
1回答
在HTML select中，我有10个optgroup，每个optgroup有30个项目，所以在select...it中有300个选项是一个很大的列表。
是否可以使用一些CSS或JS库，以便仅当选择当前选项组时才显示每个选项组下的选项？
有点像2级JS菜单，但我使用HTML select作为源。有可能吗？
浏览 1提问于2014-11-23得票数 0
1回答
我的选择列表中有2个视光组，(类别和子类别)，我试图在选择子类别时显示optgroup并隐藏其他选项。
例如，如果我选择子类别中的类别(体育、音乐)，则只显示体育和音乐。
我试过使用下面的代码，但它不起作用
谢谢
$("#custom_form_names_category").on("change", function() {
var selectedVal = $(this).find("option:selected").text();
console.log(selectedVal);
$('#custom_for
浏览 6提问于2020-02-07得票数 2
回答已采纳
如何在html中单击select标记中的optgroup。单击此标签时，应选择其所有子选项。
例如:选择带有标签的optgroup瑞典汽车应该自动选择沃尔沃和萨博的选项。
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgr
浏览 6提问于2016-07-15得票数 0
回答已采纳
1回答
我正在使用antd的select组件，我可以在select选项中呈现复选框。但是在选择复选框时，它会更改为占位符中的标记。如何才能只选中多个复选框而不将其呈现为占位符中的标记
我的代码在链接中
import React from "react";
import "./styles.css";
import { Select, Checkbox } from "antd";
import "antd/dist/antd.css";
const { Option, OptGroup } = Select;
export default
浏览 7提问于2020-06-27得票数 0
回答已采纳
3回答
我需要以下方面的帮助：
如何做出两级选择选项。category和subcategory和JavaScript？
<select id="category" required>
<option value="">select model type</option>
<option class="Volvo" value="1">Volvo</option>
<option class="Saab" value="2
浏览 2提问于2018-02-02得票数 1
回答已采纳
1回答
如何使选项组可选
<select>
<optgroup value="0" label="Parent Tag">
<option value="1">Child Tag</option>
<option value="2">Child Tag</option>
</optgroup>
</select>
浏览 0提问于2019-05-13得票数 0
回答已采纳
1回答
点击此链接：
我还看到了这个：
分层视图中的响应级别；每个级别的文档数
31个级别；300,000个文档
有人能解释一下什么是分层视图吗?在这种情况下，级别的含义是什么？
我还需要注意IBM Notes的其他“数据库”限制吗？这样做的原因是，IBM Notes中内置了一个ERP应用程序，我想检查是否有需要检查的数据库限制。
浏览 20提问于2017-01-10得票数 1
回答已采纳
1回答
我正在尝试绑定一个选择/列表框，其中我有3个级别的数据，我希望输出如下所示
<select>
<optgroup label="Root 1">
<optgroup label="Group 1">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
浏览 0提问于2018-10-19得票数 1
回答已采纳
我有这个类别的MySql表：
id , name , parent
现在，使用这个function，我在selectbox和optgroup html标记中列出了类别：
$options = array();
$categories = DataAccess::fetch("
SELECT
* , p.name AS parent
FROM
cats AS child
INNER JOIN
cats AS p ON p.id = child.parent
");
foreach($categories as $category){
浏览 0提问于2013-12-31得票数 2
6似乎完全忽略了CSS类或选择、选项或optgroup标记的规则。
有没有办法绕过这个限制(除了安装最新版本的IE)？
编辑：更准确地说，我试图在选项之间建立一个层次结构，比如：
下面是HTML片段：
<select name="hierarchicalList" multiple="multiple">
<option class="group niv0">Os developers</option>
<option class="group niv1">Linux<
浏览 9提问于2008-10-08得票数 8
回答已采纳
我创建了带有optgroup的选择框，在开发过程中，我看到在Chrome中，optgroup用1px移动到右边，但在Firefox中显示得很好。
这是我的密码
HTML
<div class="col-xs-6" id="test">
<select aria-invalid="false" class="form-control" multiple="multiple" size="6">
<option value="120">O
浏览 6提问于2016-03-09得票数 0
1回答
我正在尝试创建具有从API中提取子类别的<optgroup>。目前，只有<optgroup>正在填充，而不是子类别。
let select = document.querySelector("#category");
const categoriesURL = "INSERT_URL"
let str = "";
fetch(categoriesURL)
.then(response => response.json())
.then(data => {
data.forEach(cat
浏览 7提问于2022-01-13得票数 0
回答已采纳
我的jquerymobile表单有一个选项分组的多部分下拉列表。在加载表单时，我必须设置一些默认选项。我试过像这样
$('#myselect')[0].selectedIndex = 2;
$('#myselect')[0].selectedIndex = 3;
$('#myselect')[0].selectedIndex = 5;
$('#myselect').selectmenu("refresh");
但是只有第五个选项被选中，如何使用js为多个选项设置selected option true。
+++编辑
浏览 1提问于2011-10-03得票数 0
我有一个带有分组选项和另一个默认选项的select组件。在没有组的情况下，CSS不会被应用到选项中。
该选项是隐藏禁用，我想改变颜色模仿占位符。这是如何做到的呢？
<select required>
<option hidden disabled selected> -- select -- </option>
<optgroup label="one">
<option > A </option>
<option
浏览 0提问于2020-10-27得票数 0
回答已采纳
我已经创建了一个customer c# DropDownList控件，它可以呈现它的内容是optgroups (不是从头开始的，我编辑了一些在互联网上找到的代码，尽管我确实知道它在做什么)，而且它工作得很好。
然而，我现在遇到了一种情况，我需要在我的下拉列表中有两个级别的缩进，即
<select>
<optgroup label="Level One">
<option> A.1 </option>
<optgroup label="Level Two">
<o
浏览 9提问于2009-06-24得票数 85
回答已采纳
3回答
我有两个选择菜单，第一个是我想要选择的类别，另一个是我从其他菜单中选择的类别的optgroup，当我从第一个菜单中选择时，我希望第二个菜单加载与我选择的类别相关的optgroup，但它没有
HTML & PHP：(选择选项是从数据库加载的)
<select name="workout" id="exc">
<optgroup label="Legs">
<?php
$sql = "SELECT excercise FROM legs";
$res = mysql_query($sql) or
浏览 1提问于2015-01-19得票数 2
我一直试图改变字体和颜色的OptGroup，但它没有改变。我用的是情感css
<Select
className={css
.ant-select-dropdown-menu-item-group-title{
font-size: 15px;
color: white;
}
>
<OptGroup
label="Manager"
>
<Option value="ja
浏览 0提问于2019-08-04得票数 1
回答已采纳
我已经使用html optgroup实现了以下多选择。
下面是我为上述实现编写的代码。
HTML
<select multiple="" class="form-control select-checkbox" size="20">
<optgroup label="One">
<option>Dog</option>
<option>Cat</option>
<option>Hippo</option>
&l
浏览 3提问于2021-08-23得票数 0
实际问题是在选择块中以水平方式使用选项标签，并使用optgroup划分选项值。 因此，预期的结果是： Showing elements on the page 10 | 20 | 30，其中10、20、30是可选的，表将显示选定的元素数量 我得到的解决方案是： HTML： <div class="styled-select">
<select size="3">
<optgroup label="|">
<option value="10">
浏览 26提问于2019-01-30得票数 0
回答已采纳
我有一个州/城市数组，其中每个元素都有一个$cities['parent']键(值是州的0，> 0或城市，如下所示：
$cities = array(
'1' => array(
'id' => '1',
'parent' => '0',
'name' => 'California',
),
'2' => array(
'
浏览 0提问于2014-11-26得票数 0
回答已采纳
1回答
在我的主css文件中找到了这段代码--不知道它是怎么进来的，也不知道为什么，但它看起来像是重置。最妙的是，即使内容是一个空字符串，它也会完全咀嚼选择的optgroup。
看一看：
<style> *::after,
*::before {
content: '';
}
</style>
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<
浏览 1提问于2016-02-14得票数 0
回答已采纳
我正在阅读，并注意到它没有提到任何关于最大缩进级别的内容。当然，79个字符限制限制了缩进的级别，但是中有推荐的最大缩进级别吗？，您对此有什么看法？你们有公司级别的政策吗？
作为来自其他地方的一个例子，Linus在中指出
..。答案是，如果你需要超过3个等级的缩进，你无论如何都是完蛋了，并且应该修复你的程序。
浏览 7提问于2012-06-09得票数 4
回答已采纳
我想做一个图形用户界面，用户可以选择一个类别的武器与价格和容易添加更多，如果他想要的。 这是可行的，但我不知道如何为每个武器的"conf_pistols“添加一个价格，如果你在下拉列表中更改武器，它将自动更新。 var conf_pistols = {
"PISTOL": "Pistol",
"PISTOL50": "Heavy Pistol"
};
var $pistolselect = $('#optgroup_pistol');
$.each(conf_pistols, function
浏览 15提问于2021-04-01得票数 0
回答已采纳
<tr>
<td><label for="year">YEARS</label></td>
<td>
<select name="test" id="years" multiple="multiple" size="10">
<optgroup label="CHILD/TEEN
浏览 2提问于2016-09-25得票数 0
我想结合使用select2.js和twitter bootstrap 3。到目前为止一切都很好，除了下拉容器和选择容器本身的宽度不同之外。
通过调整窗口的大小，这种现象会出现和消失。
这是一张显示问题的图片
这里是jsfiddle，您可以在其中尝试调整大小。(使用IE 11和FF 26进行测试)
还有下面的代码：
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<link rel="stylesheet"
浏览 0提问于2014-02-01得票数 6
1回答
当添加optgroup以进行选择时，以下Jquery行似乎不会生效。
$('#desire_candidate > option').removeAttr("selected");
HTML
<select name="desire_candidate" id="desire_candidate">
<option id="selected1" style="color:gray" selected>Select below</option>
浏览 5提问于2015-09-30得票数 0
回答已采纳
如何关闭select optgroup (groupbox)？我想禁用选中组复选框。
<form action="show.php" method="post">
<select name="test[]" multiple="multiple" id="duo">
<optgroup label="UAE">
<option value="18">Abu Dhabi</option>
浏览 11提问于2015-03-30得票数 1
我有一个嵌套的multiselect。如何在Selenium中选择一个选项(使用python)？这就是我正在尝试的..。
filter_brands = Select( filter_panel.find_element_by_css_selector("select.form-control#filter-brands[name='filter_brands']") )
filter_brands.deselect_all()
filter_brands.select_by_value("ABC") #doesnt work!
我认为我需要选择
浏览 5提问于2018-10-23得票数 2
1回答
OPTGROUP元素似乎不是根据我定义的CSS规则呈现的。
参见下面的示例，人们可能希望“瑞典汽车”被呈现为“瑞典汽车”，但事实并非如此。
有没有其他方法可以完成这件事？
<!DOCTYPE html>
<html>
<body>
<style type="text/css">
.upper { text-transform: uppercase;}
</style>
<select>
<optgroup label="Swedish Cars" class="upper
浏览 0提问于2013-07-24得票数 1
2回答
这里有一个HTML选择表单，它显示组和类别。当我打开页面时，它会显示来自每个类别的所有内容，我想要做的是打开页面仅显示来自第1组的内容。
下面是HTML：
<span class="select_label">View Content: </span>
<select id="content_select">
<option value="ALL">Choose category</option>
<o
浏览 0提问于2013-10-17得票数 0
回答已采纳
我使用两个名为cat_parent的表，其中保存父类别&保存类别项的cat_sub。
以下是数据库结构。
cat_parent
Column Column Type Null
cat_id int(11) No
category_name varchar(355) No
cat_sub
Column Column Type Null
sub_cat_id int(11) No
profile_category int(10
浏览 2提问于2016-12-08得票数 0
2回答
我已经实现了comobox，但是我的问题是，我想为我的项目实现两个combobox，并且我想为它们分配不同的is，比如这个<select id="size1"。如何将id分配给这个<select data-placeholder="Your Favorite Football Team" style="width:350px;" class="chosen-select" multiple tabindex="6">，如果我将id分配给html中的select标记，如何在jquery代码$(
浏览 4提问于2016-07-29得票数 1
回答已采纳
1回答
我有两个ul列表，每个列表中有两个复选框。我需要使第一个复选框禁用和启用第二个复选框。当选择第一个选项时，应禁用第二个select，否则启用。第二个列表也是如此。这是我的html：
<ul>
<li>
<div class="select-country">
<select class="units" id="country">
<option value="Metres">Metres</option>
浏览 2提问于2015-09-06得票数 0
回答已采纳
这个问题已经被问到了here，并且得到了完美的回答，但问题是它在Safari中不能像在Chrome中那样正常工作。在Safari中，optgroup和option都不支持display: none。 有没有办法让它像Chrome一样工作？ 这是codepen Snippet $.each($('#u-address > optgroup'), function() {
$(this).clone().empty().appendTo('#m-address');
});
myOgVisibility();
//for dblclick
$(
浏览 17提问于2019-03-07得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
