如何在“opt group element”中动态嵌套“option element”？
在HTML中，可以使用<optgroup>标签来创建一个选项组，用于对相关选项进行分组。而在<optgroup>中，可以使用<option>标签来创建具体的选项。
要在<optgroup>元素中动态嵌套<option>元素，可以使用JavaScript来实现。下面是一种实现方法：
- 首先，获取到需要动态嵌套选项的
<optgroup>元素，可以使用document.getElementById()或其他选择器方法。 - 创建一个空的字符串变量，用于存储将要嵌套的
<option>元素的HTML代码。 - 使用JavaScript循环或其他方式，遍历要嵌套的选项数据。
- 在循环中，将每个选项的数据拼接成一个
<option>元素的HTML代码，并将其追加到之前创建的字符串变量中。 - 循环结束后，将拼接好的字符串变量作为新的
innerHTML赋值给<optgroup>元素，即可动态嵌套选项。
下面是一个示例代码：
<select>
<optgroup id="myOptgroup" label="Options">
<!-- Dynamic options will be added here -->
</optgroup>
</select>
<script>
// 获取到要动态嵌套选项的optgroup元素
var optgroup = document.getElementById('myOptgroup');
// 创建一个空的字符串变量
var optionsHTML = '';
// 模拟选项数据
var optionsData = [
{ label: 'Option 1', value: '1' },
{ label: 'Option 2', value: '2' },
{ label: 'Option 3', value: '3' }
];
// 遍历选项数据，拼接HTML代码
for (var i = 0; i < optionsData.length; i++) {
var option = optionsData[i];
optionsHTML += '<option value="' + option.value + '">' + option.label + '</option>';
}
// 将拼接好的选项HTML代码赋值给optgroup元素
optgroup.innerHTML = optionsHTML;
</script>通过以上代码，可以在<optgroup>元素中动态嵌套多个<option>元素。根据实际需求，可以根据数据动态生成选项，并使用不同的标签属性来定义选项的值和显示文本。
相关·内容
我尝试扩展angular 2 cookbook中的动态表单应用程序，这样我就可以拥有多个字段的数组。我已经能够显示字段，但是当我填充表单时，我只填充了数组的最后一个元素。
Hier是我对应用程序状态的描述：
//question-array.ts
import { QuestionBase } from './question-base';
export class ArrayQuestion extends QuestionBase<string> {
controlType = 'array';
options:{childe:For
浏览 6提问于2016-09-21得票数 1
1回答
我有一个表单，我也想附加一个额外的输入字段，但由于某些原因，当我提交表单时，字段没有提交，我不能理解为什么？
预期行为:单击按钮，每次单击按钮时，将1x字段追加到窗体的wrapperVary中。这部分工作正常，字段会追加，我可以在框中键入一个值。
然后，当表单提交时，我希望在数组中看到这些字段，如下所示：
HTML`这里是"variant": { "1": { "opt1": "small", "opt2": "blue", "opt3":
浏览 1提问于2020-01-13得票数 0
我有以下代码，它用数组中包含的项目列表填充dropdown： <form id="myGroupSelectForm">
<select id="selectGroup">
<option>Choose a Group</option>
</select>
<select id="selectStudent">
<option>Choose a Student</option>
<
浏览 6提问于2020-06-12得票数 0
我需要根据填充下拉列表的源数据的某些属性值动态添加<option>元素。有时，由于营销部门希望以疯狂的方式显示数据，子元素需要改为<optgroup>元素。由于这些要求，我不能使用ng- <select>执行简单的语句，也不能使用与ng-结合的子元素执行父级重复。我在我的指令中遇到了各种问题，试图使用ng-switch或ng-if来获得所需的结果。
由于这些问题，我决定将整个select元素作为我的指令中的模板。然后，在link函数中，我将解析出所有传入的数据，并将格式正确的<option>或<optgroup>元素附加到模板中定义的
浏览 1提问于2015-10-13得票数 0
我正在通过一组对象创建一个tcomb-form，但我没有太多的经验，老实说，我正在努力掌握它。
这是我们将要使用的数组结构：
export const AUDIT_CONTENT =
[
{type: "label", style: "title", group: "4.1", text: "field text here"},
{type: "label", style: "label", group: "4.1", text: "field tex
浏览 5提问于2018-03-16得票数 0
2回答
我偶然发现了一个问题，需要你的帮助，在这里找出一些逻辑来解决这个问题。基本上，我有一个动态订单，用户端根据用户选择的选项实时更新价格，使用javascript。问题是，有三个动态下拉，可能不可能都存在，即有时会有下降的any，有时只会有a，或只是a和b，等等。我得到的错误是，任何未定义的选择变量是未定义的(很明显)。我已经实现了一些js来处理这个问题，但是没有成功。下面是我正在使用的代码：
PHP：
$a_sql = ("SELECT * FROM prod_add WHERE pid = '$id' AND `group` = 'a'"
浏览 6提问于2013-12-13得票数 0
回答已采纳
1回答
如何在编辑视图中触发动态下拉列表
、、、、
我刚开始使用web开发，我只是学习了Jquery来创建动态下拉列表。我面临的问题是，当我转到编辑视图时，我的下拉列表没有被更新。
因此，我已经能够成功地为create视图创建动态下拉列表(请参阅代码)。
Create.cshtml:
<div class="form-group col-md-4" id="drop_1">
<label asp-for="Option_1" class="control-label"></label>
<select asp-for=
浏览 0提问于2019-08-20得票数 0
回答已采纳
3回答
我目前正在使用一个设置变量相当深的插件(在某些地方有3-4个级别)。按照普遍接受的jQuery插件模式，我实现了一种简单的方法，用户可以使用以下符号动态修改设置：
$('#element').plugin('option', 'option_name', 'new_value');
下面是与我现在用于options方法的代码类似的代码。
option: function (option, value) {
if (typeof (option) === 'string') {
if (val
浏览 5提问于2011-12-07得票数 6
回答已采纳
我正在尝试创建1500行，每个行在列表框中有4个列/单元格。我只想动态地做。我添加了一个使用html作为的列表框。
<body onload="load()">
<div id="myform">
<select id ="listid" name="mytable" size="5" style="width: 100px;" >
</select>
<input type="button" id="create&#
浏览 3提问于2014-11-27得票数 1
1回答
关于克隆，我有相反的问题。我有一个表单，想克隆一行(恰好2行)。我可以克隆div和input，但没有一个值可以克隆。
我在这里和谷歌上搜索了很多，但没有找到解决方案。我通读了jQuery克隆的应用程序接口，但它说默认行为是复制带有值的输入字段。
//define template
var template = $('#termekek .row:first').clone();
//define counter
var sectionsCount = 1;
//add new section
$('body').on('click&#
浏览 3提问于2017-10-01得票数 0
我试图在一个多个选项上获得多个选项，并将它们添加到一个普通选择中，但是当我单击一个按钮来添加时，我选择了两个选项，并将它们添加到普通选择中的一个选项中。
JSFIDDLE
JavaScript代码
function addProf() {
// get reference to select element
var sel = document.getElementById('ProfAdd');
var opt = document.createElement('option'); // create new option eleme
浏览 4提问于2015-10-04得票数 0
回答已采纳
如何隐藏窗体并在单击标签时显示该窗体？
<form id="form1" action="javascript:return true;" name="form1">
<input type="radio" name="group1" value="opt1" id="opt1"
onclick="show()"><label for="opt1">Option 1</label><br>
浏览 0提问于2011-05-28得票数 0
回答已采纳
1回答
我向选项添加了一个链接，但单击时只选择该选项。如何在没有选择的情况下打开链接？
$(document).ready(function() {
$('.js-select-multi').select2({
placeholder: 'Select an option',
templateResult: formatOption
});
function formatOption(option) {
var $option_text = '';
var $option_details = '
浏览 7提问于2022-06-22得票数 0
回答已采纳
我已经在SO上阅读了很多关于这个主题的帖子，但我遇到的建议解决方案都不能帮助我解决我的问题。 我有一个动态HTML选择框，它是基于MySql查询的结果用PHP语言构建的。除了select选项的选定文本值之外，在value属性中，我还将两个值传递给Javascript以便稍后使用，它们之间用逗号分隔(与问题无关，只是为了使下面的代码更清晰)。 我完全理解字符串中的撇号会导致问题，需要采取特殊的预防措施来处理它们。我的工作原理是，在动态创建选择框控件时，我只需要在任何单引号之前放置一个'‘字符，以便稍后由javascript逐字处理传递的值。 我的动态PHP选择框代码如下所示： $loc
浏览 13提问于2021-10-05得票数 0
回答已采纳
3回答
我最近尝试制作一个具有多个选择框的表单。当有人选择选项时，所选选项的数量将显示在另一个文本中。我是JavaScript的初学者。
该函数被调用，但它不会计算所选选项的数量。
<select name="element_17_1[ ]"
size="7" multiple="multiple"
class="element select medium"
id="element_17_1[ ]"
onfocus="selectCount(th
浏览 2提问于2012-06-19得票数 0
回答已采纳
我有这样的东西： class MyForm(forms.Form):
CHOICES = (
('opt1', 'Opt1'),
('group',(
('opt2', 'Opt2'),
('opt3', 'Opt3'),
)
),
)
myfield = forms.ChoiceField(choices=CHOICES
浏览 43提问于2020-09-18得票数 1
回答已采纳
1回答
你好，我想使用javascript创建动态下拉列表，但它不起作用。
我的PHP代码：
<input type="button" onclick="javascript:addRow();" value="Add Row" name="addRow"/>
我的JS代码：
// This function is used to create dynamic form element
function addRow() {
var opt = document.createElement("option
浏览 0提问于2012-08-15得票数 0
回答已采纳
下面是多姆。
<div id="sortableWrapper">
<div class="questionWrapper">
<fieldset class="scheduler-border">
<div class="form-group">
<select class="ddlControlType">
<option&
浏览 2提问于2017-09-02得票数 1
回答已采纳
我有一个动态填充的<select>。我需要将这些选项部分分组到<optgroup>标记中/简化情况下的代码如下：
html:
<select id="mySelect" size="9">
</select>
<h1>how to add them with code only?</h1>
JS:
var opt = [
{name:"somefriend1"},
{name:"somefriend2"},
{n
浏览 4提问于2015-11-06得票数 0
回答已采纳
1回答
我正在动态生成元素，按一下按钮，如下所示。
javascript，它有助于生成多个表行
<SCRIPT language="javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var ce
浏览 2提问于2014-06-19得票数 0
我有这样的选择框
<select size="20" multiple="" id="left_lps" name="lps[]">
<option lpprobability="10" lpname="1 - Chrome" id="opt8" value="8">1 - Chrome</option>
<option lpprobability="20" lpname="2 - C
浏览 0提问于2014-04-27得票数 1
回答已采纳
使用Bootstrap-4，我试图动态地在select选择器的所有选项文本旁边添加'data-subtext‘。使用下面的代码可以在数组之外创建选项列表。但我也找不到如何添加数据-潜文本。相关代码如下：
<!---HTML part,use function to insert list of options ------>
<div class="form-group mr-2">
<div class="col-mr-
浏览 1提问于2019-09-19得票数 0
基本上，我做了两次while，以获得主组&组值。示例
$group_query = $db->query("
SELECT opt_id, opt_type
FROM ads_options
WHERE opt_id = '" . intval($data['ad_id']) . "'
GROUP BY opt_type");
while ($group_data = $db->fetch($group_query))
浏览 3提问于2012-02-17得票数 0
回答已采纳
2回答
基本上，我希望此SQL返回相同的结果：
SELECT id FROM property_group_option opt
LEFT JOIN property_group_option_translation tra
ON opt.id = tra.property_group_option_id
WHERE opt.property_group_id = <id> AND tra.name = "<name>"
中描述的go方法似乎没有得到正确的结果。我尝试过以下几种方法：
$criteria = (new Crite
浏览 27提问于2021-05-20得票数 1
我试图写一个动态下拉菜单，如果第一个下拉菜单中选定的项目以字母s结尾，那么用户可以选择第二个下拉菜单中的所有项目，如果它没有结束购买字母s，他只能看到第二个菜单中的红色。有人能帮我解决这个问题吗？
<select class=form-control name="items" id="items" data-child="itemschild">
<option selected disabled>Items</option>
浏览 5提问于2020-10-31得票数 0
回答已采纳
2回答
我有两个Selectbox组。当用户从第一个选择框组中选择一个项目时；根据选择的值，我想禁用第二个选择框组中的一些项目。
下面是我的示例代码。我想要基于以下代码集执行的示例场景如下所示：
<select name="group1" id="group1">
<option value="12">Opt 1</option>
<option value="13">Opt 2</option>
<option value="21">Op
浏览 21提问于2021-06-11得票数 0
我有一些文本输入和下拉菜单的表单。这些元素是基于上一页中的用户选择动态生成的，并且这种动态生成的元素运行良好。现在，假设我的代码是这样的-
<form id="myForm" >
<select id='id1'>
<option value="">Select an option</option>
<option value="opt1">opt1</option>
<option value="opt2">opt2<
浏览 0提问于2014-06-27得票数 1
我在两个多选框中有一个很长的选项列表，我想根据select_A动态填充select_B的选项，例如：
如果我从select_A中选择多个opt1和opt2，select_B将只显示具有id=sub1和id=sub2的optgroup选项，如果我取消选择opt1并从select_A中选择opt3，select_B将删除optgroup sub1并保留sub2和sub3，依此类推，可以灵活控制。
<select id="select_A" multiple="multiple" size="10">
<optgroup la
浏览 0提问于2013-03-01得票数 0
1回答
我正在使用jQuery AJAX请求动态获取数据。Ajax调用是嵌套的，它们在每个先前请求的success函数中调用。我这样做是为了不给服务器带来太多的负载。下一个请求只应在上一个请求完成后发送或成功。
以下是ajax代码
function showforLanguagetra(option, catid, meta)
{
$.ajax({ ///execute only if catid = 1,3,6,8
type:"GET",
url: "/Ajax1111",
data: {
浏览 3提问于2012-07-23得票数 0
回答已采纳
5回答
当玩家单击“回答”框(选择答案)时，我希望更改答案的颜色，如下图所示。
这是我的html代码，无线电台是标签的子代。我尝试了一些命令，例如：
.choices >inputtype=“收音机”：选中{背景:黄色；}
但表面上这不是真的。另外，请有人告诉我，当我将unchecked=“签入”到无线电信箱线路？时，有什么不同？
太感谢你们了！
<!-- ---question1--- -->
<div class="quest">
<h1>Question 1 of 1
浏览 5提问于2021-10-02得票数 3
回答已采纳
22回答
我已经试着效仿其他答案，但我没有成功！
我创建了一个反应性表单(即动态表单)，并且希望在任何给定的时间禁用一些字段。我的表格代码：
this.form = this._fb.group({
name: ['', Validators.required],
options: this._fb.array([])
});
const control = <FormArray>this.form.controls['options'];
control.push(this._fb.group({
value: ['']
}))
浏览 21提问于2017-03-16得票数 235
回答已采纳
2回答
我收到一个错误，我试图点击的元素不能点击，我相信这不是真的。
我的错误看起来是：
1) Open VehiclePage and populate data Populate vehicle data
Message:
UnknownError: unknown error: Element is not clickable at point (1315, 371). Other element would receive the click: <div class="form-con
rol combo-options ng-scope ng-animate ng
浏览 0提问于2015-06-16得票数 10
回答已采纳
3回答
我正在尝试编写一个特性，允许我将多个嵌套Option<Option<...<T>>>>“解包装”到单个Option<T>，以便更好地使用我正在使用的API。我正在尝试创建一个通用的解决方案，但我不知道如何使它工作。
这是我的许多尝试之一：
trait UnwrapOption<T> {
fn unwrap_opt(self) -> Option<T>;
}
impl<T> UnwrapOption<T> for Option<T> {
fn unwrap_o
浏览 1提问于2018-09-22得票数 14
回答已采纳
我对enyo完全陌生，我正在努力学习。因此，我决定为我的服务器端项目创建一个简单的配置应用程序。
我试着把这样的东西放在箱子里：
group1 [on]/ off | option1 <select_box_selected_opt1>
group2 on /[off] | option2 <select_box_selected_opt2>
group3 [on]/ off > option3 <select_box_selected_opt3>
| opti
浏览 4提问于2013-08-18得票数 0
回答已采纳
2回答
假设我有以下模型结构：
@Entity
@Table(....)
public class AnnotationGroup{
...
private List<AnnotationOption> options;
@OneToMany(cascade = CascadeType.ALL, fetch = FetchType.EAGER, orphanRemoval = true)
@JoinColumn(name = "annotation_group_id", nullable = false)
public List&
浏览 4提问于2017-09-14得票数 4
1回答
我有一个带有多个选择的表单，提交表单时获得的url如下所示：
tld.com/?var1=opt1$var1=opt2&var1=opt3&var2=opt1&var2=opt2
我想要的网址是：
Tld.com/?var1=opt+opt 2+opt 3&var2=opt 1+opt 2
我不想使用存储在数组中的选项的$_POST方法，因为我希望url对于任何自定义搜索都是唯一的。
该表单如下所示：
<form action="" method="get">
<select name="var
浏览 1提问于2012-02-03得票数 0
1回答
我正在将 CLI从an解析传输到click。当前，该库允许使用以下
manim file.py Scene1 Scene2 -p -ql
但也适用于子命令(有些具有自己的子命令)，如下所示：
manim plugins --list
manim cfg write --level cwd
... and more.
因此，manim关键字既是一种访问子命令的方式，更重要的是，它本身具有一个位置arg ( python文件)。在arg解析中，确定manim关键字后面的文本是子命令还是位置arg是读取sys.argv[2]并确定它是否匹配可用的子命令的问题，否则就是一个位置参数。结果是添加了大量的
浏览 2提问于2021-01-19得票数 0
这就是select2.github.io给您的内容：
function addIcons(opt) {
if (!opt.id) {
return opt.text;
}
var $opt = $(
'<span><img src="/images/flags/' + opt.element.value.toLowerCase() + '.png" class="img-flag" /> ' + opt.text + '</spa
浏览 4提问于2015-03-26得票数 19
回答已采纳
下面是相关的HTML：
<html>
<body>
...
<select id="class" name="class">
<option value=0>Select a Class</option>
<option>IGME-101-##</option>
<option>IGME-102-##</option>
<option>IGME-105-##</opt
浏览 1提问于2014-03-18得票数 2
这是我在使用id="mystuff"的第一个选择列表中的视图，我将选择一个选项，而不是相关的div
(与选项的值和类名相关。就像这里的value="opt1"和class="mystaff_opt1"一样，我比较一下"opt1")将使用java脚本显示。
我想要的是显示div必须在表单提交后也在那里(提交后，我的页面被定向到同一页)。
<div class="container margin_120">
<div class="row">
<div class=&
浏览 6提问于2017-06-02得票数 0
如何用jquery重置表单中的多个选择框？
有多个选择框
它们是动态生成的&我们不知道它们会是什么
一些框选项标记将被标记为选定的。
小提琴：
到目前为止，我有这个，它重置一切，除了选择。
$('button#reset').click(function(){
$form = $('button#reset').closest('form');
$form.find('input:text, input:password, input:file, select, textarea')
浏览 6提问于2014-07-16得票数 6
我有一个疑问：
$options = $product->options->mapToGroups(function ($item, $key) {
return [$item->group->type => $item];
});
它返回我的产品选项和它们的组类型，
概述
dd code above
Collection {#3138 ▼
#items: array:3 [▼
"color" => Collection {#3132 ▼
#items: array:2 [▶]
}
"dro
浏览 0提问于2019-02-04得票数 1
回答已采纳
我给出了两个<select>控件，第二个控件的值应该根据第一个选项中的选择动态填充。例如，当您选择A时，对应的单词应该作为选项出现在第二个下拉列表中。我该怎么做呢？我试过了，但是列表看起来是水平的，我需要垂直的。
var teams = [
"Bambus Baumwolle Bettkasten",
" Baumwolle Bettkasten",
"Bambus Baumwolle Bettkasten",
" Baumwolle Bettkasten",
"Ba
浏览 4提问于2014-10-29得票数 0
回答已采纳
HTML：
<select name="employee_ID" id="employee_ID" onchange="$('#IncomeTaxDeduction').val($('#employee_ID').find(':selected').data('incomtax'));">
<option value="" disabled selected style="display:none;">
浏览 5提问于2017-04-12得票数 0
下面是我需要向单选按钮传递默认值的代码。
<div class="ui-g-12">
<p-radioButton name="group1" value="Option 1" label="Option 1" [(ngModel)]="val1" inputId="opt1"></p-radioButton>
</div>
<div class="ui-g-12">
<p-radioButton name=&
浏览 2提问于2018-02-20得票数 2
回答已采纳
1回答
我有一个HTML：
<div id="custom_options" >
<div class="options_group">
<div class="form-group col-md-12 ">
<label class="control-label" for="opt_group">group</label>
<input type="text" class="form-con
浏览 4提问于2020-08-31得票数 0
2回答
未显示下拉列表值
、、、
这是我在我的网页上遇到的一个非常奇怪的问题。我目前有一个下拉列表，其中填充了使用perl和javascript的数据库中的数据，但是这个下拉列表没有显示我从数据库接收到的值。
我目前拥有的代码如下：
my $dataX = ${ConnectToDatabase($main::edsUGCar, $main::databaseEnv)};
$resultSet = $dataX->Execute("select vendor from dex_vendor_info group by vendor");
my @list_of_vendors;
while(!$resu
浏览 1提问于2014-06-19得票数 0
我可以通过Python中的碎片模块从页面的下拉列表中选择一个特定的元素吗？
我有以下HTML代码：
<select id="xyz">
<optgroup label="Group1">
<option value="1">pick1</option>
<option value="2">pick2</option>
</optgroup>
<optgroup label="Group2
浏览 2提问于2014-05-23得票数 6
回答已采纳
<select class="form-control">
<?php
$flag=0;
foreach ($result as $row) { ?>
if(flag==0)
{
<option value="<?php echo $row->tbl_group_id; selected="selected"?>" ><
浏览 2提问于2015-01-29得票数 0
我尝试将数组值显示到select标记中，但所有数组值都显示为单个值。请看下面我添加的逻辑。数据是动态的，我正在从后端获取数据，比如“Sankranti1”。 const [eventNameList, setEventNameList] = useState([])
var eventList = eventNameList.length > 0 ?
eventNameList.map((item,i) => {
console.log('list: ', item)
浏览 38提问于2021-01-15得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
