html-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> </option> <option>Third</option> <option>Fourth</option> <option style="font-size: 1pt; background-color: #000000;" disabled> </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>

html html-select

回答 0 投票 0

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

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

laravel pivot-table html-select nested-loops

回答 1 投票 0

HTML 选择会在 iPhone 上自动打开

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

html ios html-select

回答 1 投票 0

PDO 查询的分组结果问题

我的列表有问题，我想显示组和子组（sgroups），例如：组1 sgroup1-a sgroup1-b sgroup1-c sgroup1-d 组2 sgroup2-a sgroup2-b 但我的代码返回：

php mysql pdo grouping html-select

回答 3 投票 0

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

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

jquery html json html-select

回答 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 类似的算法修改其值。然后也许从选择元素中删除名称字段。

html html-select

回答 3 投票 0

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

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

javascript jquery asp.net drop-down-menu html-select

回答 1 投票 0

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

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

php jquery wordpress woocommerce html-select

回答 1 投票 0

保存并显示从 WooCommerce 后端到前端的下拉所选值

我在 Woocommerce 应答代码中使用了在产品级别设置数量最小值、最大值和步骤来在 WooCommerce 产品上实现最小、最大和步骤数量。然后我尝试添加一个新的选择器 2

php wordpress woocommerce html-select product

回答 1 投票 0

使用 jQuery 选择下一个选项

我正在尝试创建一个可以选择下一个选项的按钮。所以，我有一个带有多个选项的选择（id=selectionChamp），一个输入下一个（id=fieldNext），我尝试这样做： $('#fieldNext').click(

javascript jquery jquery-selectors html-select

回答 9 投票 0

从 ASP Razor Pages 中获取下拉列表选定的值和文本

我的表格中有这个，如下所示： @CommonResource.SalesPerson * 我的表格中有这个，如下所示： <div class="col-lg-3"> <label class="form-label" asp-for="WOHeader.SP_ID">@CommonResource.SalesPerson *</label> <select class="form-select" asp-for="WOHeader.SP_ID" asp-items='(IEnumerable<SelectListItem>)ViewData["SPList"]!' asp-disabled="@(Model.REC_MODE == (short)RecModeId.AddNew)"> </select> <span class="invalid-feedback" asp-validation-for="WOHeader.SP_ID"></span> </div> 我可以获得绑定到 WOHeader.SP_ID 的选定值。我还需要获取其选定的文本。我现在能想到的最好选择是将其保存到隐藏字段。有没有更好的方法可以在通过 Ajax 回发后在代码隐藏中获取所选值和文本？我尝试了各种方法但没有成功。请指教。谢谢。选择元素中所选项目的文本不会作为表单提交过程的一部分传递到服务器，因此当前使用客户端代码将其保存到隐藏字段的解决方案是最明显且最容易实现的。

html-select razor-pages

回答 1 投票 0

SVG 位于 OPTION 元素内

我正在创建以下 svg 元素和结构：我正在创建以下 svg 元素和结构： <svg width="135" height="15"> <rect width="15" height="15" fill="#ffffe5" x="0" y="0"></rect> <rect width="15" height="15" fill="#f7fcb9" x="15" y="0"></rect> <rect width="15" height="15" fill="#d9f0a3" x="30" y="0"></rect> <rect width="15" height="15" fill="#addd8e" x="45" y="0"></rect> <rect width="15" height="15" fill="#78c679" x="60" y="0"></rect> <rect width="15" height="15" fill="#41ab5d" x="75" y="0"></rect> <rect width="15" height="15" fill="#238443" x="90" y="0"></rect> <rect width="15" height="15" fill="#006837" x="105" y="0"></rect> <rect width="15" height="15" fill="#004529" x="120" y="0"></rect> </svg> 这会产生一排小方块。就像这样：到目前为止一切都OK。然后我将上面的代码放在 option 下拉列表的 select 中，如下所示： <select id="data-color-scheme"> <option id="YlGn"> <div> <svg width="135" height="15"> <rect width="15" height="15" fill="#ffffe5" x="0" y="0"></rect> <rect width="15" height="15" fill="#f7fcb9" x="15" y="0"></rect> <rect width="15" height="15" fill="#d9f0a3" x="30" y="0"></rect> <rect width="15" height="15" fill="#addd8e" x="45" y="0"></rect> <rect width="15" height="15" fill="#78c679" x="60" y="0"></rect> <rect width="15" height="15" fill="#41ab5d" x="75" y="0"></rect> <rect width="15" height="15" fill="#238443" x="90" y="0"></rect> <rect width="15" height="15" fill="#006837" x="105" y="0"></rect> <rect width="15" height="15" fill="#004529" x="120" y="0"></rect> </svg> </div> </option> </select> 现在option的内容显示为白色空白，如下图：正如你所看到的，图像的内容是空的。但是，如果我运行调试检查器，我仍然可以检测到那里的 svg 元素。我做错了什么？如何在选项内显示 svg？谢谢。 HTML <option> 元素只能包含纯文本。您遇到的是长期运行的“如何设计 <select> 元素的样式”讨论。描述多年来提出的所有可能的黑客和解决方案远远超出了此处答案的范围，并且纯粹基于意见。四处寻找 CSS hack 试图覆盖操作系统提供的样式用于 Javascript 库的 UI 模块，可模拟 <select> 与其他元素的行为网络组件并做出自己的决定。直接回答：使用表情符号，尽管它们在不同的浏览器和版本中看起来有所不同使用 select2 jquery 方法。安装并使用它

html svg html-select

回答 2 投票 0

您可以更改 Microsoft Edge 中 :hover 上选择选项的背景颜色吗？

我一直在尝试更改鼠标悬停时选择下拉列表的选项元素的背景颜色，但无法使其在 Microsoft Edge 中工作，悬停始终显示为灰色...

css hover microsoft-edge html-select background-color

回答 2 投票 0

如何禁止从 Angular JS 下拉列表中选择特定选项？

我想从 AngularJS 下拉列表中禁用特定选项。它应该列在下拉列表中，但不应允许选择它。所以我需要禁用它。我的文件.tpl.html 我想从 AngularJS 下拉列表中禁用特定选项。它应该列在下拉列表中，但不应允许选择它。所以我需要禁用它。 MyFile.tpl.html <select class="form-control" ng-model="selectedFruits" ng-options="fruit as fruit.name for fruit in fruits"> </select> MyController.js $scope.fruits = [{'name': 'apple', 'price': 100},{'name': 'guava', 'price': 30}, {'name': 'orange', 'price': 60},{'name': 'mango', 'price': 50}, {'name': 'banana', 'price': 45},{'name': 'cherry', 'price': 120}]; 这里所有水果名称都应在下拉列表中列出，但 mango 和 cherry 应禁用，并且不应允许用户选择它。可能吗？如果可以的话请告诉我解决方案。 select 选项通过 disabled 属性禁用。由于 ng-options 不支持禁用，因此您必须在 ng-repeat 中生成选项并根据需求设置 ng-disabled。模板： <select class="form-control" ng-model="selectedFruits"> <option ng-repeat="fruit in fruits" ng-disabled="disabledFruits.indexOf(fruit.name) !== -1" ng-value="fruit"> {{fruit.name}} </option> </select> 内部控制器： $scope.disabledFruits = ["mango", "cherry"] JSBin. 刚刚遇到这个，值得一提的是，从 Angular 版本 1.4.0-rc.1 开始这是可能的这里是文档ngOptions 和一些对话 Angular Github var app = angular.module("testApp", []); app.controller("testController", function($scope) { $scope.people = [{ "id": "0", "name": "Homer", "surname": "Simpson", "isDisabled": false }, { "id": "1", "name": "Peter", "surname": "Griffin", "isDisabled": false }, { "id": "2", "name": "Philip", "surname": "Fry", "isDisabled": false }, { "id": "3", "name": "Humpty", "surname": "Dumpty", "isDisabled": true }, ]; $scope.myPerson = $scope.people[2]; }); <!DOCTYPE html> <html ng-app="testApp"> <head> <script src="https://code.angularjs.org/1.4.0-rc.1/angular.js"></script> <link href="style.css" rel="stylesheet" /> <script src="script.js"></script> </head> <body ng-controller="testController"> <select ng-model="myPerson" ng-options="person.name disable when person.isDisabled for person in people"> </select> </body> </html> 和笨蛋如果您将禁用值设置为默认值，它将不起作用，您将看到空白的选定项目。

javascript angularjs html-select

回答 0 投票 0

如何使用javascript从列表框中获取多个选定的值和项目

函数 getValue() { var x = document.getElementById("sel"); 对于 (var i = 0; i < x.options.length; i++) {...</desc> <question vote="18"> <pre><code> <!DOCTYPE html> <html> <script> function getValue() { var x = document.getElementById("sel"); for (var i = 0; i < x.options.length; i++) { if (x.options[i].selected == true) { alert(x.options[i].selected); } } } </script> </head> <body> <select multiple="multiple" id="sel"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select> <input type="button" value="Get Value" onclick="getValue()"/> </body> </html> </code></pre> <p>这是我的代码。如何使用 JavaScript 从列表框中获取所有选定的值？上面的代码显示所有选定值的 <pre><code>true</code></pre>。</p> </question> <answer tick="true" vote="19"> <p>更换</p> <pre><code> if(x.options[i].selected ==true){ alert(x.options[i].selected); } </code></pre> <p>与</p> <pre><code> if(x.options[i].selected){ alert(x.options[i].value); } </code></pre> </answer> <answer tick="false" vote="7"> <p>我建议你像这样使用 jQuery：</p> <pre><code>var selected = $('#sel option:selected'); </code></pre> <p>如果您不想使用 jQuery，请忽略此答案并参考其他答案。</p> </answer> <answer tick="false" vote="3"> <p>使用 <strong><em>所选选项</em></strong> </p> <pre><code>for (var i = 0; i < x.selectedOptions.length; i++) { alert(x.selectedOptions[i].value); } </code></pre> </answer> <answer tick="false" vote="0"> <pre><code>var obj = document.querySelectorAll('#sel option:checked'); var result = Object.keys(obj).map((key) => [obj[key].value, obj[key].text]); alert(result); </code></pre> </answer> <answer tick="false" vote="0"> <p>相同示例的解决方案</p> <pre><code> <!DOCTYPE html> <html> <script> function getValue() { var x = document.getElementById("sel"); for (var i = 0; i < x.options.length; i++) { if (x.options[i].selected == true) { alert(x.options[i].value); } } } </script> </head> <body> <select multiple="multiple" id="sel"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select> <input type="button" value="Get Value" onclick="getValue()"/> </body> </html> </code></pre> </answer> <answer tick="false" vote="0"> <p>在支持 ECMAScript 2015 的现代浏览器中，您可以使用</p> <p><pre><code>let selectedValues = Array.from(multiSelectElement.options).filter(o=>o.selected).map(o=>o.value)</code></pre></p> <p>或（使用扩展运算符）</p> <p><pre><code>let selectedValues = [...multiSelectElement.options].filter(o=>o.selected).map(o=>o.value)</code></pre></p> <p>对于像 Internet Explorer 这样的古董浏览器以及为了实现极端的向后兼容性，您仍然可以做很长的路要走（将 <pre><code>let</code></pre> 更改为 <pre><code>var</code></pre>，如果您：</p> <pre><code>var selectedValues = []; for (var i = 0; i < multiSelectElement.options.length; ++i) { var option = multiSelectElement.options[i]; if (option.selected) { selectedValues.push(option.value); } } </code></pre> <p>其中 <pre><code>multiSelectElement</code></pre> 是对元素的引用（使用 <pre><code>document.getElementById("id")</code></pre> 或其他）</p> <p>参考： <a href="https://stackoverflow.com/questions/222841/most-efficient-way-to-convert-an-htmlcollection-to-an-array">将 HTMLCollection 转换为数组的最有效方法</a></p> </answer> </body></html>

javascript html combobox html-select

回答 0 投票 0

html-select 相关问题

最新问题