html-select 相关问题

如何动态设置 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 中隐藏元素 ...

在“SELECT”标签中呈现“OPTION”的层次结构

我的问题与 HTML 和 CSS 相关。我有一个层次结构类型的结构，我想在列表中显示。该层次结构包含国家、州和城市（共三层）。 我想要

在 Svelte 中生成具有多个长选择元素的表单很慢

我正在用 Svelte 编写一个应用程序，我有一个页面，其中有一个显示为表格的值列表。我希望能够编辑这些值，并且其中一个值由选择元素选择...

当文本超过 200 个字符时选择选项溢出网页

此选择控制溢出网页 如图所示 仓鼠 此选择控制溢出网页 如图所示 <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。 我的索引刀片如下图所示。 单击提交按钮后，它向我显示...

有没有办法将 HTML 元素包装在选项标签内？

例如： ... 例如： <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 - 编辑表单中的下拉选项

我正在用 laravel 构建一个 CRUD 应用程序。在我的创建表单中，我让用户从下拉列表中选择一个选项，并将值发布到数据库。 我现在正在尝试编辑该表单，但我无法获取...

在 HTML 中 <select> 如果我已有联系人数据，如何预先填写下拉列表？

我需要在下拉菜单上有一个“请选择”，它不应该是可选的，但是添加此选项时，它不会显示我现有的数据，并且默认为“请选择” 随着 '

Angular ng-select 在创建动态控件时未选择值

我需要使用 ng-select 动态添加城市，因为我在输入城市名称时需要搜索选项。可以说我有两个城市名称保存在新表单中，在进行编辑时我必须......

在 <option> 标签内使用 href 链接

我有以下 HTML 代码： 首页 联系方式 我有以下 HTML 代码： <select name="forma"> <option value="Home">Home</option> <option value="Contact">Contact</option> <option value="Sitemap">Sitemap</option> </select> 如何将 Home、Contact 和 Sitemap 值设为链接？ 我使用了以下代码，正如我所料，它不起作用： <select name="forma"> <option value="Home"><a href="home.php">Home</a></option> <option value="Contact"><a href="contact.php">Contact</a></option> <option value="Sitemap"><a href="sitemap.php">Sitemap</a></option> </select> 2022 年更新：这个答案很好，但实际上在 2022 年我们不应该再这样做了！ 更新（2020 年 5 月）： 有人在评论中问我为什么不提倡这个解决方案。我想这是一个语义问题。我宁愿我的用户使用 <a> 进行导航，并保留 <select> 进行表单选择，因为 HTML 元素具有语义满足并且它们有目的，anchors 带您去往的地方，<select> 用于从列表中选择内容。 考虑一下，如果您正在使用非传统浏览器（非图形浏览器或屏幕阅读器或以编程方式访问页面，或禁用 JavaScript）查看页面，那么此内容的“含义”或“意图”是什么 <select> 你用过导航吗？它说“请选择一个页面名称”，没有太多其他内容，当然也没有关于导航的内容。对此的简单反应是well i know that my users will be using IE or whatever so shrug，但这有点忽略了语义的重要性。 虽然一个时髦的下拉 UI 元素由合适的布局元素（和一些 js）组成，包含一些常规锚点，但即使布局元素丢失，它仍然保留其意图，“这些是一堆链接，选择一个，我们将导航到那里”. 这是一篇关于误用和滥用<select>的文章。 原答案 <select name="forma" onchange="location = this.value;"> <option value="Home.php">Home</option> <option value="Contact.php">Contact</option> <option value="Sitemap.php">Sitemap</option> </select> 更新（2015 年 11 月）： 在当今时代，如果您想要一个下拉菜单，有很多可以说是 更好的方法来实现。 这个答案是对直接问题的直接回答，但我不这样做不要在面向公众的网站上提倡这种方法。 您不能在选项标签内使用 href 标签。您将需要 JavaScript 来执行此操作。 <select name="formal" onchange="javascript:handleSelect(this)"> <option value="home">Home</option> <option value="contact">Contact</option> </select> <script type="text/javascript"> function handleSelect(elm) { window.location = elm.value+".php"; } </script> 使用真正的下拉菜单：列表（ul，li）和链接。切勿滥用表单元素作为链接。 使用屏幕阅读器的读者通常会浏览自动生成的链接列表 - 他们会错过这些重要信息。许多键盘导航系统（例如 JAWS、Opera）为链接和表单元素提供不同的键盘快捷键。 如果您仍然无法放弃 select 的想法，至少不要使用 onchange 处理程序。这对于键盘用户来说是一个真正的痛苦，它使您的第三个项目几乎无法访问。 接受的解决方案看起来不错，但有一种情况它无法处理： 重新选择同一个选项时，不会触发“onchange”事件。所以，我想出了以下改进： HTML <select id="sampleSelect" > <option value="Home.php">Home</option> <option value="Contact.php">Contact</option> <option value="Sitemap.php">Sitemap</option> </select> jQuery $("select").click(function() { var open = $(this).data("isopen"); if(open) { window.location.href = $(this).val() } //set isopen to opposite so next time when use clicked select box //it wont trigger this event $(this).data("isopen", !open); }); （我没有足够的声誉来评论toscho的答案。） 我没有使用屏幕阅读器的经验，我确信您的观点是正确的。 但是，就使用键盘操作选择而言，使用键盘选择任何选项都很简单： TAB 到控件 按空格键打开选择列表 向上或向下箭头滚动到所需的列表项 ENTER 选择所需项目 仅在按 ENTER 时，onchange 或 (JQuery .change()) 事件才会触发。 虽然我个人不会将表单控件用于简单的菜单，但有许多 Web 应用程序使用表单控件来更改页面的呈现方式（例如排序顺序）。这些可以通过 AJAX 来实现，以将新内容加载到页面，或者在旧的实现中，通过触发新页面加载，这本质上是页面链接。 恕我直言，这些是表单控件的有效用途。 <select> 标签创建一个下拉列表。您不能将 html 链接放入下拉列表中。 但是，有一些 JavaScript 库提供类似的功能。这是一个示例：http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm <select name="career" id="career" onchange="location = this.value;"> <option value="resume" selected> All Applications </option> <option value="resume&j=14">Seo Expert</option> <option value="resume&j=21">Project Manager</option> <option value="resume&j=33">Php Developer</option> </select> 我确信有人可以用 Jquery 做出比这更好的答案，其中下拉列表中的更改将导致一个新页面（有利于导航栏上的导航控制）。 <td><select name="forma" id='SelectOption'> <option value="Home"><a href="home.php">Home</a></option> <option value="Contact"><a href="contact.php">Contact</a></option> <option value="Sitemap"><a href="sitemap.php">Sitemap</a></option> </select></td><td> document.getElementById('SelectOption').addEventListener('change', function() { val = $( "#SelectOption" ).val(); console.log(val) if(val === 'Home') { window.open('home.php','_blank'); } if(val === 'Contact') { window.open('contact.php', '_blank'); } if (val === 'Sitemap') { window.open('sitemap.php', '_blank'); } });

如何在 Blazor 中的同一页面上添加多个下拉列表

我试图在单个页面中多次插入相同的下拉列表。 我有一个物品 X 我有一个 ProcessAreas 列表（a、b、c、d、e） 我有一个指令列表 (1,2,3,4,5,6) 我需要创建一个...

在选项中使选择的选项更小/很长文本

我一直在尝试在文本很长时控制选项的长度，并且我希望文本在其内容大于 300 像素时断行 我的代码： .form-control-sel...

PHP 在循环中循环，选择了选项？

使用 PHP，我在循环中回显表行，如下所示： ”; 回声“&

Playwright 使用 selectOption 类进行下拉选择不会触发下拉元素中嵌入的 JS 事件

我尝试使用 Playwright 从下拉选项中进行选择，问题是下拉有一个嵌入的 JS 事件，应该在选择其中一个选项后触发。剧作家选择了

在 Django 中选择 <select> 元素的默认值

我有一个按以下方式创建的下拉菜单： {% 主机中的主机 %} {{ 主机.ip 地址 }} 我有一个按以下方式创建的下拉菜单： <select id="ip_addr"> {% for host in hosts %} <option value="{{ host.ipaddress }}">{{ host.ipaddress }}</option> {% endfor %} </select> 而且我不知道如何设置默认值。通常我只会说类似的话 <option value="0.0.0.0" selected>0.0.0.0</option> 但是由于我用循环填充此下拉菜单，我不知道如何确保选择我想要的选项。我确信有一种非常直接的方法可以做到这一点，但我对 HTML/JavaScript/Django 仍然很陌生。 您有 2 个选项，使用 Django 模板内置功能： 如果您想将第一台主机设置为默认选择选项 如果您想将特定主机设置为默认选择选项 以下是 2 种可能的解决方案： <select id="ip_addr"> {% for host in hosts %} <option value="{{ host.ipaddress }}" {% if forloop.first %}selected{% endif %}>{{ host.ipaddress }}</option> {% endfor %} </select> <select id="ip_addr"> {% for host in hosts %} <option value="{{ host.ipaddress }}" {% if host.ipaddress == '0.0.0.0' %}selected{% endif %}>{{ host.ipaddress }}</option> {% endfor %} </select> 注意：fooloop.first 是一个特殊的模板循环变量，在循环的第一次迭代期间为 True。 这里是一个决定select选择索引的例子 var obj = document.getElementById("sel"); for(i=0; i<obj.options.length; i++){ if(obj.options[i].value == "b"){ obj.selectedIndex = i; } } <select id="sel"> <option value="a">a</option> <option value="b">b</option> </select> 我经过多次测试后发现希望它会有所帮助： <select> {% for priority in priorities %} {% if actual_priority == priority %} <option select>{{priority}}</option> {% else %} <option>{{priority}}</option> {% endif %} {% endfor %} </select> 需要发送您认为的“actual_priority”和“priorities” 提到的方法都不适合我。但作为解决方法，我将默认选项作为第一个元素，放在 for 循环之外 <select name="Customer" id="Customer"> <option value="{{ defaultValue }}" selected > {{ defaultValue }} </option> {% for val in customerlist %} <option value="{{val}}">{{val}}</option> {% endfor %} </select>

按字母顺序对数据库中的下拉列表值进行排序

我可以使用数据库中的值填充下拉列表。然而，由于值很大，该列表未排序且繁忙。当用户