一个HTML用户界面元素，用于从有限的选项集合中选择一个或多个选项。
几个月前，iPhone/iOS 推出了一项我根本不喜欢的新功能；当焦点设置在 HTML 选择上时，选择列表现在始终在 iP 上自动打开...
我的列表有问题，我想显示组和子组（sgroups），例如： 组1 sgroup1-a sgroup1-b sgroup1-c sgroup1-d 组2 sgroup2-a sgroup2-b 但我的代码返回：
我正在尝试使用外部 JSON 文件中的数据填充 HTML 下拉菜单，其中包含以下内容 { “目的地”：[ { "destinationName": "伦敦", “目的地...
如何在表单中发布多项选择的值？当我点击“提交”时，不会发布任何选定的值。 如何在表单中发布多项选择的值？当我点击“提交”时，不会发布任何选定的值。 <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 类似的算法修改其值。然后也许从选择元素中删除名称字段。
jquery-editable-select 在 asp.net 下拉列表中不起作用
我正在尝试在 asp.net dropdownlist 工具中实现 jquery-editable-select 但它不起作用，而同样的事情在 html select dropdownlist 中工作 这是 Html Select Dropdow 的代码...
我在注册表单中添加了2个自定义字段，我需要根据用户选择的“代理”角色隐藏它们，但我做不到，这是我的代码示例，我会很高兴任何. ..
保存并显示从 WooCommerce 后端到前端的下拉所选值
我在 Woocommerce 应答代码中使用了在产品级别设置数量最小值、最大值和步骤来在 WooCommerce 产品上实现最小、最大和步骤数量。 然后我尝试添加一个新的选择器 2
我正在尝试创建一个可以选择下一个选项的按钮。 所以，我有一个带有多个选项的选择（id=selectionChamp），一个输入下一个（id=fieldNext），我尝试这样做： $('#fieldNext').click(
从 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 回发后在代码隐藏中获取所选值和文本？我尝试了各种方法但没有成功。 请指教。谢谢。 选择元素中所选项目的文本不会作为表单提交过程的一部分传递到服务器，因此当前使用客户端代码将其保存到隐藏字段的解决方案是最明显且最容易实现的。
我正在创建以下 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 方法。安装并使用它
您可以更改 Microsoft Edge 中 :hover 上选择选项的背景颜色吗？
我一直在尝试更改鼠标悬停时选择下拉列表的选项元素的背景颜色，但无法使其在 Microsoft Edge 中工作，悬停始终显示为灰色...
我想从 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从列表框中获取多个选定的值和项目
函数 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>
Laravel 5.4 中如何使用表单中的多个下拉列表从数据库中获取数据？
我有一个 Blade 视图，它基本上是一个由 3 个下拉值组成的表单，例如 Division、District 和 Upazila： 我的索引刀片如下图所示： 单击提交按钮后，它显示了我
我正在尝试向选择标签中的选项添加默认值。 1 2 我正在尝试向选择标签中的选项添加默认值。 <form> <select> <option>1</option> <option>2</option> <option>3</option> </select> </form> 我想知道是否可以将默认值设置为用户选择的值。 例如，如果用户选择2并提交表单，我如何将默认值设置为2？ 将属性“checked”添加到您想要的默认选项中。类似于... <option>1</option> <option <?php echo $_POST["select_name"] == 2 ? "checked": ""; ?> >2</option><option>3</option> 感谢@Bollis 的想法 但我不确定 checked 现在是正确的属性。它更改为selected（文档） 所以对于我的用例 html + php 我曾经让它像这样工作 - 首先，我有一个 php 变量，它确定我必须在页面上显示的默认下拉值 - <?php $default_value = 2; ?> 然后在我的html<select>中，我做了这个- <select name="selectionName" id="selectionId"> <option <?php echo $default_value == "" ? "selected" : ""; ?> value= "">None</option> <option <?php echo $default_value == "1" ? "selected" : ""; ?> value="1">1</option> <option <?php echo $default_value == "2" ? "selected" : ""; ?> value="2">2</option> <option <?php echo $default_value == "3" ? "selected" : ""; ?> value="3">3</option> <option <?php echo $default_value == "4" ? "selected" : ""; ?> value="4">4</option> <option <?php echo $default_value == "5" ? "selected" : ""; ?> value="5">5</option> </select> 解释：在每个<option>中，都会检查$deafult_value变量，并且如果它的值与该<option>的值相同，则selected属性将被删除。 。 这使得可以根据 echo 变量的值动态选择 <option>。
不同的城市选择字段取决于 WooCommerce 中所选的国家/地区
在结账时，我为几个国家/地区进行了单独的城市选择（它们的值将进入隐藏的默认文本字段 billing_address_1）。城市选择是我自己做的，它们是个人的。 我也用p...
我想在选择上添加占位符或名称..我希望显示“宠物类型”，但会显示“宠物 1”..谢谢.. 宠物1... 我想在选择上添加占位符或名称..我希望显示“宠物类型”，但会显示“宠物 1”..谢谢.. <select name="Pet Type"> <option value="A">Pet 1</option> <option value="B">Pet 2</option> <option value="C">Pet 3</option> </select> 我想在选择上添加占位符或名称..我希望显示“宠物类型”，但会显示“宠物 1”..谢谢.. 使用 <option value="" disabled selected>-- Pet Type --</option> 作为您的第一个选项，请参阅如何为“选择”框制作占位符？
有没有办法在其自己的更改事件处理程序中更改 HTML 的选择？ 我有这段代码，它工作得很好。当我在下拉列表中选择一个项目然后 c... 有没有办法在其自己的更改事件处理程序中更改 HTML <select>的选择？ 我有这段代码，它工作得很好。当我在下拉列表中选择一个项目然后单击按钮时，该项目将从下拉列表中删除，添加到另一个数组中，并且 <select> 的选择将重置为 null 元素，显示为 -- Please select filter -- 在页面上。 <select class="form-select form-select-sm" [(ngModel)]="selectedFilter"> <option [ngValue]="null" [disabled]="true">-- Please select filter --</option> <option *ngFor="let flt of availableFilters; let idx = index" [ngValue]="flt">{{ flt.caption }}</option> </select> <button class="btn btn-sm btn-primary" (click)="addFilter()" [disabled]="!selectedFilter"><i class="fa fa-plus"></i></button> selectedFilter: AvailableFilter | null; // [snip] addFilter(): void { if (this.selectedFilter) { this.addFilterInternal(this.selectedFilter); } } private addFilterInternal(flt: AvailableFilter): void { // Add filter to active filters this.activeFilters.push(flt); // Remove filter from available filters let idx = this.availableFilters.indexOf(flt); this.availableFilters.splice(idx, 1); // Reset filter selection drop-down this.selectedFilter = null; } // [snap] 我的用户希望改变这一点，即按钮触发的操作应该在选择时执行。因此，我向 change 添加了一个 <select> 侦听器，它调用组件的完全相同的函数。 <select class="form-select form-select-sm" [(ngModel)]="selectedFilter" (change)="addFilter()"> <option [ngValue]="null" [disabled]="true">-- Please select filter --</option> <option *ngFor="let flt of availableFilters; let idx = index" [ngValue]="flt">{{ flt.caption }}</option> </select> <button class="btn btn-sm btn-primary" (click)="addFilter()" [disabled]="!selectedFilter"><i class="fa fa-plus"></i></button> 但这并没有按预期工作。该元素仍会从下拉列表中删除并添加到另一个数组中，但 <select> 不会重置为 null 元素。我的猜测是这不起作用，因为我位于更改侦听器范围内。 所以我尝试将 this.selectedFilter = null 代码封装在 Subject 上的订阅中，以便在函数结束时异步执行（当然，该函数在移动项目后在主题上调用 next() 和 complete()）数组之间）。但这没有帮助，下拉菜单的行为保持不变。 正如 @MaxTuzenko 在评论中建议的那样，我将 this.selectedFilter = null 调用包装在 setTimeout() 中，延迟为 0。这成功了，现在可以按要求工作了。 所以上面的 TypeScript 代码改为这样，参见 addFilterInternal() 函数的最后两行。 selectedFilter: AvailableFilter | null; // [snip] addFilter(): void { if (this.selectedFilter) { this.addFilterInternal(this.selectedFilter); } } private addFilterInternal(flt: AvailableFilter): void { // Add filter to active filters this.activeFilters.push(flt); // Remove filter from available filters let idx = this.availableFilters.indexOf(flt); this.availableFilters.splice(idx, 1); // Reset filter selection drop-down const self = this; setTimeout(() => self.selectedFilter = null, 0); } // [snap]
'嘿，我想在检查我的 type = radio 输入时禁用选择属性。 它尝试了很多东西但没有任何效果。 这是我正在谈论的代码部分：' '嘿，我想在选中我的 type = radio 输入时禁用选择属性。 它尝试了很多东西但没有任何效果。 这是我正在谈论的代码部分：' <input id="societeInterne" name="radioSociete" type="radio" value="Interne"/><label>Interne / </label> <input id="societeExterne" name="radioSociete" type="radio" value="Externe"/><label>Externe - </label> <label for="PrestataireStit"> Préciser le STIT </label> <ol> <li style="list-style-type: disc"> <select id="selectPresta"> <option value='GROUPE presta' name='Societe presta'>presta</option> <option value='GROUPE presta' name='Societe presta'>presta</option> <option value='GROUPE presta' name='Societe presta'>presta</option> </select> </li> </ol> '我想要的是，当未选择输入“societeExterne”时，禁用选择“selectPresta”。 我尝试了 javascript 中不同类型的函数，但没有一个起作用：' var radioExterne = document.getElementById('societeExterne'); var radioInterne = document.getElementById('societeInterne'); var selectPresta = document.getElementById('selectPresta'); if (radioExterne.checked) { selectPresta.disabled = false; } else { selectPresta.disabled = true; } var radioExterne = document.getElementById('societeExterne'); var radioInterne = document.getElementById('societeInterne'); var selectPresta = document.getElementById('selectPresta'); radioExterne.addEventListener( "change", (event) => { selectPresta.disabled = !event.target.checked; }, false, ); “还有另外 2 或 3 个，但我没有，也不记得他们，所以是的。” 如果您将内容包装在 form 元素中，那么您可以监听表单的更改并相应地切换 selectPresta.disabled： var form = document.getElementById('myform'); var radioExterne = document.getElementById('societeExterne'); var selectPresta = document.getElementById('selectPresta'); //listen for a change in the form form.addEventListener("change", (event) => { //does the value of form.radioSociete not match that of radioExterne? selectPresta.disabled = !(form.radioSociete.value == radioExterne.value); }); //trigger change on load to set initial state form.dispatchEvent(new Event("change")); <form id="myform"> <label><input id="societeInterne" name="radioSociete" type="radio" value="Interne" />Interne / </label> <label><input id="societeExterne" name="radioSociete" type="radio" value="Externe" />Externe - </label> <label for="PrestataireStit"> Préciser le STIT </label> <ol> <li style="list-style-type: disc"> <select id="selectPresta"> <option value='GROUPE presta' name='Societe presta'>presta</option> <option value='GROUPE presta' name='Societe presta'>presta</option> <option value='GROUPE presta' name='Societe presta'>presta</option> </select> </li> </ol> </form>
我正在订阅 HTTP 服务器以接收数据，之后我的选择控件将通过 Angular 框架加载数据。 我的目标是设置默认值。 我的默认值是...