html-select 相关问题

一个HTML用户界面元素,用于从有限的选项集合中选择一个或多个选项。

@Html.ListBoxFor 不选择最初选择的元素

我在 ASP.NET Core 8 MVC 视图中有以下代码: @{ var listaAreas = new List(); if (Model.Areas!= nul... 我在 ASP.NET Core 8 MVC 视图中有此代码: <div class="mb-3 position-relative"> @{ var listaAreas = new List<SelectListItem>(); if (Model.Areas != null && Model.Areas.Any()) { var areasActuales = Model.Areas.Select(r => new SelectListItem() { Text = r.Area?.AreaNombre ?? string.Empty, Value = (r.Area?.AreaId ?? 0).ToString(), Selected = r.Selected }); listaAreas.AddRange(areasActuales); } } @Html.LabelFor(m => m.Areas) @Html.ListBoxFor(m => m.Areas, listaAreas, new { @class = "form-control", style = "width: 100%", multiple = "multiple" }) </div> 调用 listaAreas 时,这是 ListBoxFor 数组: 即使唯一的选项有 Selected = true,HTML SELECT 标签也显示为未选中。 这是怎么回事? 编辑: 我最后一次尝试,但没有成功: <div class="mb-3 position-relative"> @{ MultiSelectList? listaAreas = null; if (Model.Areas != null && Model.Areas.Any()) { listaAreas = new MultiSelectList(Model.Areas.Where(a => a.Area != null).Select(a => a.Area), "AreaId", "AreaNombre", Model.Areas.Where(a => a.Selected).Select(a => a.Area?.AreaId).ToArray()); } } @Html.LabelFor(m => m.Areas) @Html.ListBoxFor(m => m.Areas, listaAreas, new { @class = "form-control", style = "width: 100%", multiple = "multiple" }) </div> 即使唯一的选项 Selected = true,也会出现 HTML SELECT 标签 没有选择。我已经删除了该属性,但同样的情况发生了 根据您共享的代码片段和描述,我已尝试调查您的问题。但是,在 ASP.NET Core 中,没有预定义的标记帮助器来显示多选下拉列表。如果您想实现带复选框的下拉菜单或 onclick 保持下拉框中的项目处于选中状态,您应该使用基于 javaScript 的插件。 我尝试使用 bootstrap-multiselect.js 来演示带有复选框的多选下拉列表。 让我们看看如何在实践中实现这一点。 控制器: public IActionResult MultiSelectCheckboxDropdown() { var multiSelectList = new List<SelectListItem> { new SelectListItem { Value = "1", Text = "C#" }, new SelectListItem { Value = "2", Text = "JavaScript" }, new SelectListItem { Value = "3", Text = "Python" }, new SelectListItem { Value = "4", Text = "Java" }, new SelectListItem { Value = "5", Text = "C++" }, new SelectListItem { Value = "6", Text = "Swift" }, new SelectListItem { Value = "7", Text = "Go" }, new SelectListItem { Value = "8", Text = "Ruby" }, new SelectListItem { Value = "9", Text = "TypeScript" }, new SelectListItem { Value = "10", Text = "PHP" } }; ViewBag.multiSelectList = multiSelectList; return View(); } 查看: <h3>Multi select</h3> @Html.DropDownList("Category", ViewBag.multiSelectList, null, new { @class = "selectpicker", multiple = "multiple", id = "Subjects_dropdown" }) <!-- Latest compiled and minified CSS --> @section scripts { <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/css/bootstrap-select.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/1.1.2/js/bootstrap-multiselect.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/1.1.2/css/bootstrap-multiselect.min.css"></script> <script> $(document).ready(function () { $('#myMultiSelect').select2(); $('#Subjects_dropdown').multiselect(); }); </script> } 输出: 注意: 请根据您的需要修改脚本和html。由于没有用于多选下拉列表的内置标签帮助器,所以我尝试与您分享这一点。如果您想检查更多样本,您可以查看此文档。

回答 1 投票 0

检测 ScrollTop() 的选项

我正在使用ajax加载选项 我需要在滚动选项时检测scrollTop以调用ajax加载更多数据 我搜索了很多关于scrollTop()的选项,但我发现......

回答 1 投票 0

如何显示模板django中数据库中下拉列表中所有项目中所选项目的值

请帮助根据列表(项目)中所选的值自动填写字段(公司/修订),例如,如果在下拉列表中选择“PROJECT2”...

回答 1 投票 0

将多个选择选项放入 PHP 数组中

我有一个选择框列表。是否可以选择多个选项? 我有一个选择框列表。可以选择多个选项吗? <select name="access_list[ ]" size="7" multiple="multiple"> <?php $res=mysql_query("select * from list" ,$conn); while($row=mysql_fetch_assoc($res)) echo"<option value=".$row['id'].">".$row['name']."</option>";?> </select> 将要选择的值(一起选择多个值)如何存储在数组中? 使用名称为 name="access_list[]",不带空格。 您可以使用 $_POST['access_list'] 获取选定的选项 $_POST['access_list'] 是包含所选选项的 array 将您选择的标签替换为: <select name="access_list[]" size="7" multiple="multiple"> 如果你想获取数组,你可以这样做: $data = $_POST['access_list']; print_r($data); 存储为数组然后在你的 php 中就像这样。 <?php $access_list = $_POST['access_list']; foreach($access_list as $value) { //Do your code Here } ?>

回答 0 投票 0

jinja2 if else 在选择标签中

{% for t in tdata %} <select class="form-control" id="types" name="types" combojs="types"> {% for t in tdata %} <option value="{{ t[0] }}" {% if t[0] == t1is %} selected {% endif %}> {{ t[0] }} </option> {% endfor %} </select> 我使用 python Flask render_template 将 tdata 作为列表传递,并且 t1 作为选定的。 这适用于下拉组合框,其中 t1 是显示的选定选项, 但如果没有使用 t1is 选择,我也可以设置默认值吗?我尝试在选择后放置 {% else t[0] == "None" %} ,但我不知道这是否是正确的语法。当然这是行不通的。如果未选择任何内容,则显示第一项。我需要将默认项目设置为列表中的第一个吗? 由于只有在 for 循环结束后才能确定没有匹配项,此时再将 selected 属性添加到所需的默认选项中就已经太晚了,因此您可以事先使用另一个循环来决定哪个选项已选择: {% set ns = namespace(selected="None") %} {% for t in tdata if t[0] == t1is %} {% set ns.selected = t1is %} {% endfor %} <select class="form-control" id="types" name="types" combojs="types"> {% for t in tdata %} <option value="{{ t[0] }}" {% if t[0] == ns.selected %} selected {% endif %}> {{ t[0] }} </option> {% endfor %} </select>

回答 0 投票 0

可编辑的“选择”元素

我想在表单中有一个选择元素,但除了下拉列表中的选项之外,能够编辑它并添加新选项会很有用,但不能使用另一个输入文本,我需要全部输入...

回答 6 投票 0

删除暴露的过滤器中的空选项

我有一个公开的过滤器,带有一个选择选项下拉字段,可收集当前视图中的所有实际值。不幸的是,它还收集并显示我视图中的空白字段。 我有

回答 1 投票 0

Javascript selecbox.options 到数组?

据我了解,填充 HTML 中选择元素的选项元素是一个数组。 所以基本上我想做的是返回一个用逗号分隔的数组字符串。 尝试做选择框。

回答 8 投票 0

更改 WooCommerce 变量产品自定义属性下拉选项无名称

我正在 WooCommerce 中构建一个网站,并且我制作了一个自定义单产品页面,因为我想设计该页面的样式。 我创建了一个子主题,在这个子主题中,文件结构看起来

回答 1 投票 0

自定义 WooCommerce 变量产品属性下拉列表名称问题

您好,我正在 woocommerce 中建立一个网站。 我制作了一个自定义的单产品页面,因为我想设计该页面的样式。 我在这个子主题中创建了一个子主题。 结构看起来像这样 #

回答 1 投票 0

如何将选定选项颜色与禁用选项分开设置

我有一个 HTML 下拉选择菜单,其中第一个选项被禁用。我想以灰色显示默认禁用选项,但是一旦我选择了另一个值,我希望它显示为蓝色...

回答 5 投票 0

jQuery - 单击 optgroup 选择所有子选项

如何在 html 中使选择标签中的 optgroup 可点击。当我们单击此标签时,应选择其所有子选项。 示例:选择带有瑞典汽车标签的 optgroup 应该

回答 3 投票 0

<option>元素有<select>分隔符吗?

如何在 标签中的选项之间添加分隔符?就像这样: 新窗户 新标签 ------------ 保存页面 ------------ 退出 如何在 <select> 标签中的选项之间添加分隔符?像这样: New Window New Tab ----------- Save Page ------------ Exit 禁用选项方法似乎看起来最好并且得到最好的支持。我还提供了一个使用 optgroup 的示例。 optgroup(这种方式有点糟糕): <select> <optgroup> <option>First</option> </optgroup> <optgroup label="_________"> <option>Second</option> <option>Third</option> </optgroup> </select> 禁用选项(好一点): <select> <option>First</option> <option disabled>_________</option> <option>Second</option> <option>Third</option> </select> 如果你想要真正的花哨,请使用水平 unicode 框绘图字符。 (最好的选择!) <select> <option>First</option> <option disabled>──────────</option> <option>Second</option> <option>Third</option> </select> http://jsfiddle.net/JFDgH/2/ 尝试: <optgroup label="----------"></optgroup> 这是我最喜欢的分离方式。 我发现使用破折号之类的东西有点碍眼,因为它可能会小于选择框的宽度。所以,我更喜欢使用 CSS 来创建分隔符......简单的背景色。 <select> <option style="background-color: #cccccc;" disabled selected>Select An Option</option> <option>First Option</option> <option>Second</option> <option style="font-size: 1pt; background-color: #000000;" disabled>&nbsp;</option> <option>Third</option> <option>Fourth</option> <option style="font-size: 1pt; background-color: #000000;" disabled>&nbsp;</option> <option>Fifth</option> <option>Sixth</option> </select> 如果您不想使用 optgroup 元素,请将破折号放入选项元素中,并为其指定禁用属性。它将可见,但呈灰色。 <option disabled>----------</option> 我使用扩展字符集中的水平条符号替换了它,而不是常规的连字符,如果用户位于替换该字符但对我来说工作正常的另一个国家/地区,它看起来不会很好。您可以使用一系列不同的角色来获得一些很棒的效果,并且不涉及 CSS。 <option value='-' disabled>――――</option> 在 CSS 中定义一个类: option.separator { margin-top:8px; border-top:1px solid #666; padding:0; } 用 HTML 编写: <select ...> <option disabled class="separator"></option> </select> 以 Jasneet 的答案为基础: 将禁用选项的背景设置为灰色(Jasneet) 在上方和下方添加禁用选项以填充分隔符 基本上,使用三个禁用选项来制作一个自然风格的分隔符。我选择了一条非常细的 0.1px 灰线和 0.25em 的焊盘高度,因为我认为这种组合看起来最自然: <select> <option :value="item1">Item 1</option> <option disabled style="font-size: 0.25em;"></option> <option disabled style="background: #c9c9c9; font-size: 0.1px;"></option> <option disabled style="font-size: 0.25em;"></option> <option :value="item2">Item 2</option> </select> 我将 @Laurence Gonsalves 的评论作为答案,因为它是唯一在语义上有效且看起来不像黑客的评论。 尝试将其添加到您的样式表中: optgroup + optgroup { border-top: 1px solid black } 比一堆破折号看起来不那么俗气。 您可以使用 <hr> 创建真正的分隔符: 请参阅 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr#browser_compatibility 中的 <select> 行了解浏览器兼容性。 另一种方法是在选项上使用 css 1x1 背景图像,该选项似乎只适用于 Firefox 并且有一个“----”后备 <option value="" disabled="disabled" class="SelectSeparator">----</option> .SelectSeparator { background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==); color:black; background-repeat:repeat-x; background-position:50% 50%; background-attachment:scroll; } http://jsfiddle.net/yNecQ/6/ 或使用 javascript (jquery) 来: -hide the select element and -show a div which can be completely styled and -reflect the div state onto the select for the form submit http://tutorialzine.com/2010/11/better-select-jquery-css3/ 另请参阅 如何在 html 选择控件中添加水平线? 我们可以使用不带选项的 optgroup 标签 可以设置font-size:1px来最小化高度,并且 一些漂亮的背景 .divider { font-size: 1px; background: rgba(0, 0, 0, 0.5); } .divider--danger { background: red; } <select> <option value="option1">option 1 key data</option> <option value="option2">option 2 key data</option> <optgroup class="divider"></optgroup> <option value="option3">option 3 key data</option> <option value="option4">option 4 key data</option> </select> <select> <option value="option1">option 1 key data</option> <option value="option2">option 2 key data</option> <optgroup class="divider divider--danger"></optgroup> <option value="option3">option 3 key data</option> <option value="option4">option 4 key data</option> </select> Codepen.io:https://codepen.io/JasneetDua/pen/yLOYwaV?editors=1100 根据 HTML 规范 <hr> 标签现在1 允许在 <select> 标签内用作分隔符。 4.10.7 选择元素 ... 内容模型: 零个或多个选项、optgroup、hr和脚本支持元素。 这是来自 开发人员 chrome 博客的示例 <label for="major-select">Please select a major:</label> <br/> <select name="majors" id="major-select"> <option value="">Select a major</option> <hr> <option value="arth">Art History</option> <option value="finearts">Fine Arts</option> <option value="gdes">Graphic Design</option> <option value="lit">Literature</option> <option value="music">Music</option> <hr> <option value="aeroeng">Aerospace Engineering</option> <option value="biochemeng">Biochemical Engineering</option> <option value="civileng">Civil Engineering</option> <option value="compeng">Computer Engineering</option> <option value="eleng">Electrical Engineering</option> <option value="mecheng">Mechanical Engineering</option> </select> 1 我于 2023 年 5 月 2 日跟踪了对 this commit 的更改。此外,还可以在 here 找到 github 问题 浏览器支持: 目前 Safari 17+ 和 Chrome 119+ 支持 <hr> 中的 <select> 元素 这个永远是最好的。 <option>First</option> <option disabled>_________</option> <option>Second</option> <option>Third</option> 您可以使用破折号“—”。每个字符之间没有可见的空格。(在 some 字体中!) 在 HTML 中: ——————————————— 或在 XHTML 中: ——————————————— 我选择有条件地替换颜色和背景。设置排序顺序并使用 vue.js,我做了这样的事情: <style> .altgroup_1 {background:gray; color:white;} .altgroup_2{background:white; color:black;} </style> <option :class = { 'altgroup_1': (country.sort_order > 25), 'altgroup_2': (country.sort_order > 50 }" value="{{ country.iso_short }}"> {{ country.short_name }} </option <option data-divider="true" disabled>______________</option> 你也可以做这个。这很简单,让分隔符选择下拉列表。 这将解决您的问题: <select> <optgroup> <option>New Window</option> <option>New Tab</option> </optgroup> <optgroup label="_________"> <option>Save Page</option> </optgroup> <optgroup label="_________"> <option>Exit</option> </optgroup> </select>

回答 0 投票 0

我们如何选择多个下拉 HTML 来更新 Laravel 中的数据?

我在更新 Laravel 帐户表及其组时遇到问题。我希望 Laravel 选择该帐户在数据透视表中的下拉列表 ID,但它显示重复的下拉列表,因为...

回答 1 投票 0

HTML 选择会在 iPhone 上自动打开

几个月前,iPhone/iOS 推出了一项我根本不喜欢的新功能;当焦点设置在 HTML 选择上时,选择列表现在始终在 iP 上自动打开...

回答 1 投票 0

PDO 查询的分组结果问题

我的列表有问题,我想显示组和子组(sgroups),例如: 组1 sgroup1-a sgroup1-b sgroup1-c sgroup1-d 组2 sgroup2-a sgroup2-b 但我的代码返回:

回答 3 投票 0

使用外部 JSON 文件数据填充 HTML 下拉框

我正在尝试使用外部 JSON 文件中的数据填充 HTML 下拉菜单,其中包含以下内容 { “目的地”:[ { "destinationName": "伦敦", “目的地...

回答 4 投票 0

从多项选择中发布值

如何在表单中发布多项选择的值?当我点击“提交”时,不会发布任何选定的值。 如何在表单中发布多项选择的值?当我点击“提交”时,不会发布任何选定的值。 <form id="form" action="" method="post"> <div> <select id="inscompSelected" multiple="multiple" class="lstSelected"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> <input type="submit" value="submit"> </div> </form> 您需要添加一个 name 属性。 由于这是一个多重选择,在 HTTP 级别,客户端仅发送多个具有相同名称的名称/值对,如果您使用带有 method="GET": someurl?something=1&something=2&something=3 的表单,您可以自己观察到这一点。 对于 PHP、Ruby 和其他一些库/框架,您需要在名称末尾添加方括号 ([])。框架将解析该字符串并以某种易于使用的格式(例如数组)呈现它。 除了手动解析请求之外,没有与语言/框架/库无关的方法来访问多个值,因为它们都有不同的 API 对于 PHP,您可以使用: <select name="something[]" id="inscompSelected" multiple="multiple" class="lstSelected"> 试试这个:这里 select 是你选择的元素 let select = document.getElementsByClassName('lstSelected')[0], options = select.options, len = options.length, data='', i=0; while (i<len){ if (options[i].selected) data+= "&" + select.name + '=' + options[i].value; i++; } return data; 数据采用查询字符串的形式,即name=value&name=anotherValue 我要采取的路线是在表单中添加一个隐藏字段,并在多选元素的 onchange 事件中使用与上面 @Chin2 类似的算法修改其值。然后也许从选择元素中删除名称字段。

回答 3 投票 0

jquery-editable-select 在 asp.net 下拉列表中不起作用

我正在尝试在 asp.net dropdownlist 工具中实现 jquery-editable-select 但它不起作用,而同样的事情在 html select dropdownlist 中工作 这是 Html Select Dropdow 的代码...

回答 1 投票 0

根据所选字段值显示或隐藏 WooCommerce 注册字段

我在注册表单中添加了2个自定义字段,我需要根据用户选择的“代理”角色隐藏它们,但我做不到,这是我的代码示例,我会很高兴任何. ..

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.