一个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 框架加载数据。 我的目标是设置默认值。 我的默认值是...
如何动态设置 Angular 中 `select` 控件的默认值
我订阅http服务器以接收数据，之后我的选择控件通过角度框架加载数据。 我的目标是设置默认值。 我的默认值包括
在 HTMX 中，如何为选择表单元素中的每个选项请求特定 URL？
我正在使用 HTMX，并且希望有一个 表单字段可以自动将特定 URL 加载到 中。 “值选择”示例与此想法类似，但它... 我正在使用 HTMX，并且希望有一个 <select> 表单字段，可以自动将特定 URL 加载到 <div> 中。 “值选择”示例与此想法类似，但它包含值作为查询参数，例如/models?make=audi。我想为每个 <option> 使用特定的 URL。 这是我认为应该有效的近似值。 <select name="make" hx-target="#models"> <option hx-get="/models/audi">Audi</option> <option hx-get="/models/toyota">Toyota</option> <option hx-get="/models/bmw">BMW</option> </select> <div id="models"> <!-- hx-get results would go here --> </div> 但是，这不起作用，我无法找到实现我所描述的方法。我怎样才能达到预期的行为？ 编辑： 相关 Twitter 帖子 我在 Twitter 上进行了 对话，得出的结论是，这还不存在。 我最终使用了 htmx:configRequest，产生了这个可重用的 JavaScript，这对于回馈 HTMX 库可能是有意义的。 document.body.addEventListener("htmx:configRequest", function (event) { let pathWithParameters = event.detail.path.replace(/:([A-Za-z0-9_]+)/g, function (_match, parameterName) { let parameterValue = event.detail.parameters[parameterName] delete event.detail.parameters[parameterName] return parameterValue }) event.detail.path = pathWithParameters }) 这是如何使用它的示例： <select name="make" hx-get="/models/:make" hx-target="#models"> <option name="audi">Audi</option> <option name="toyota">Toyota</option> <option name="bmw">BMW</option> </select> 在 AlpineJS 的一些额外帮助下我让它可以工作。 此解决方案的复杂性是因为基于 Chrome 的浏览器在 <select> 的值发生变化时不会触发 HTMX。 该解决方案使用 Alpine 来： 对事件做出反应（使用 @change 属性） 查找与该值对应的 option 元素（使用 document.evaluate 和 xPath 选择器来查找 select 元素的子元素 $el。） 然后在该元素上触发 HTMX。 <select name="make" hx-target="#models" x-data="{ renderXPathSelector(value) {return `.//option[contains(., '${value}')]`}, getChosenOption(value) {return document.evaluate(this.renderXPathSelector(value), $el).iterateNext()}, tellHTMXOptionChanged(event) { htmx.trigger(this.getChosenOption(event.target.value), 'click')} }" @change="tellHTMXOptionChanged($event)" > <option hx-get="/models/audi">Audi</option> <option hx-get="/models/toyota">Toyota</option> <option hx-get="/models/bmw">BMW</option> </select> 如果您的 select 的值与文本不同，您可以使用更简单的方式选择 option： el.querySelector(`[value="${el.value}"]`) 您可以通过将 chosenOption 函数设置为支持这两种情况： const chosenOption = el.querySelector(`[value="${el.value}"]`) || getChosenOption(event.target.value) 如果您想在应用程序中多次使用此模式，您可以创建一个“Alpine magic”来简化 HTML： <script> document.addEventListener('alpine:init', () => { Alpine.magic('tellHTMXOptionChanged', (el) => { {# This is needed for cross-browser compatability for when a <select> changes #} return (event) => { function renderXPathSelector(value) {return `.//option[contains(., '${value}')]`} function getChosenOption(value) {return document.evaluate(renderXPathSelector(value), el).iterateNext()} const chosenOption = el.querySelector(`[value="${el.value}"]`) || getChosenOption(event.target.value) htmx.trigger(chosenOption, 'click') } }) }) </script> ... <select name="make" hx-target="#models" x-data @change="$tellHTMXOptionChanged($event)" > <option hx-get="/models/audi">Audi</option> <option hx-get="/models/toyota">Toyota</option> <option hx-get="/models/bmw">BMW</option> </select> 无需脚本，只需使用 configRequest htmx 事件。 <select hx-get ="" hx-target="#models" hx-on ="htmx:configRequest: event.detail.path = this.value" > <option value="/models/audi">Audi</option> <option value="/models/toyota">Toyota</option> <option value="/models/bmw">BMW</option> </select> <div id="models"> <!-- hx-get results would go here --> </div> 我知道这是一个老问题。作者可能帮助了该功能的开发。 但是您可以在 htmx 文档中找到一种方法来执行级联选择 从文档链接复制/粘贴： <div> <label>Make</label> <select name="make" hx-get="/models" hx-target="#models" hx-indicator=".htmx-indicator"> <option value="audi">Audi</option> <option value="toyota">Toyota</option> <option value="bmw">BMW</option> </select> </div> <div> <label>Model</label> <select id="models" name="model"> <option value="a1">A1</option> ... </select> </div> 据我了解，htmx将从name获取<select>属性，并在GET方法中使用它到/modelsurl，并最终向/models?make=value_selected发送请求 我希望它能帮助未来在其他地方找不到答案的人。 您使用javascript将外部页面加载到iframe中 或者使用Ajax根据选择的值将加载的内容附加到<div id="models"></div>。
请看下面的代码： 主题： 请参阅下面的代码： <label>Subject:</label> <s:select onchange = "form1.submit();" theme = "simple" list = "#{'':'All','E':'English','M':'Maths','S':'Science','H':'Humanities'}" name = "Subject" id = "Subject" /> 但是当我在页面加载时将下拉列表更改为 E(English) 时，下拉列表更改为 ALL 并且数据也不显示。 当您将下拉菜单更改为 E(English) 时，会发生 change 事件，并且您已使用 onchange 事件处理程序将表单提交到服务器。 服务器将页面返回给客户端，但它不知道应该设置的值，因为它尚未设置。 您应该更改事件处理程序以至少不通过序号请求提交表单，或者使用 Ajax 发送数据，或者为命名字段创建 getter 和 setter 以保存列表中键的值。 此外，您不能使用空键作为列表的值，因为它与所选键不匹配。 您还可以使用 value 标签的 <s:select> 属性从列表中预先选择值。
HTML 选择下拉菜单在 android webview 中不起作用
浏览器用户代理版本： “Mozilla/5.0（iPhone；U；CPU iPhone OS 4_2_1，如 Mac OS X；en-us）AppleWebKit/533.17.9（KHTML，如 Gecko）版本/5.0.2 Mobile/8C148 Safari/6533.18.5” 基本的H...
使用 jQuery 时，边缘中的 <option> 上没有单击事件
刚刚发现，当单击选择选项时，MS Edge 中没有触发单击事件。 这是使用 jQuery 1.9.1 的代码： // data-hide - 在 data-hide 属性 onClick 中隐藏元素 ...
我的问题与 HTML 和 CSS 相关。我有一个层次结构类型的结构，我想在列表中显示。该层次结构包含国家、州和城市（共三层）。 我想要
我正在用 Svelte 编写一个应用程序，我有一个页面，其中有一个显示为表格的值列表。我希望能够编辑这些值，并且其中一个值由选择元素选择...
此选择控制溢出网页 如图所示 仓鼠 此选择控制溢出网页 如图所示 <div> <select id="animalName"> <option value="hamster">Hamster</option> <option value="parrot">Parrot</option> <option value="spider">Lorem ipsum dolor sit amet,consectetuer adipiscing elitAenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec qu</option> <option value="goldfish">Goldfish</option> </select> </div> 当选择选项溢出页面时，我想使用 CSS 而不是 JavaScript 省略、裁剪或将其划分为多行 注意： 我尝试了这个CSS，但它不起作用 option{ text-overflow: ellipsis; overflow-wrap: break-word; word-wrap: break-word; overflow: hidden; white-space: normal; } 由于您使用的是 bootstrap 4，因此您可以将 bootstrap 的 dropdown 类与 text-truncate 类结合使用。例如： <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="asdf" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown button </button> <div class="dropdown-menu " style="width: 8rem;"> <a class="dropdown-item text-truncate" href="#">Hamster</a> <a class="dropdown-item text-truncate" href="#">Lorem ipsum dolor sit amet,consectetuer adipiscing elitAenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec qu link</a> <a class="dropdown-item text-truncate" href="#">Goldfish</a> </div> </div>
如何使用 Laravel 5.4 表单中的多个下拉列表从数据库中获取数据？
我有刀片视图，它基本上是一个由 3 个下拉值组成的表单，例如 Division、District 和 Upazila。 我的索引刀片如下图所示。 单击提交按钮后，它向我显示...
例如： ... 例如： <select {...props}> <option value='my_option'> <div className='flex justify-between items-center'> <SomeIcon className='w-4'/> <p>My Option</p> </div> </option> </select> 当我尝试上述操作时，它只是丢弃图标并仅显示具有默认样式的文本 无法将 HTML 元素包装在 <option> 标签内。根据 <option> 的 HTML 规范： 内容模型： 如果元素具有 label 属性和 value 属性：无任何内容。 如果元素具有 label 属性但没有 value 属性：文本。 如果该元素没有 label 属性并且不是 datalist 元素的子元素：不是元素间空白的文本。 如果该元素没有 label 属性并且是 datalist 元素的子元素：文本。 因此，<option> 元素中只允许使用文本。其他的都被丢弃。
我正在用 laravel 构建一个 CRUD 应用程序。在我的创建表单中，我让用户从下拉列表中选择一个选项，并将值发布到数据库。 我现在正在尝试编辑该表单，但我无法获取...
在 HTML 中 <select> 如果我已有联系人数据，如何预先填写下拉列表？
我需要在下拉菜单上有一个“请选择”，它不应该是可选的，但是添加此选项时，它不会显示我现有的数据，并且默认为“请选择” 随着 '
Angular ng-select 在创建动态控件时未选择值
我需要使用 ng-select 动态添加城市，因为我在输入城市名称时需要搜索选项。可以说我有两个城市名称保存在新表单中，在进行编辑时我必须......