html-select 相关问题

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

使用 jQuery 选择下一个选项

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

回答 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 回发后在代码隐藏中获取所选值和文本?我尝试了各种方法但没有成功。 请指教。谢谢。 选择元素中所选项目的文本不会作为表单提交过程的一部分传递到服务器,因此当前使用客户端代码将其保存到隐藏字段的解决方案是最明显且最容易实现的。

回答 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 方法。安装并使用它

回答 2 投票 0

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

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

回答 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> 和笨蛋 如果您将禁用值设置为默认值,它将不起作用,您将看到空白的选定项目。

回答 0 投票 0

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

函数 getValue() { var x = document.getElementById("sel"); 对于 (var i = 0; i < x.options.length; i++) {...</desc> <question vote="18"> <pre><code> &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;script&gt; function getValue() {   var x = document.getElementById(&#34;sel&#34;); for (var i = 0; i &lt; x.options.length; i++) { if (x.options[i].selected == true) { alert(x.options[i].selected); } } } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;select multiple=&#34;multiple&#34; id=&#34;sel&#34;&gt; &lt;option value=&#34;volvo&#34;&gt;Volvo&lt;/option&gt; &lt;option value=&#34;saab&#34;&gt;Saab&lt;/option&gt; &lt;option value=&#34;opel&#34;&gt;Opel&lt;/option&gt; &lt;option value=&#34;audi&#34;&gt;Audi&lt;/option&gt; &lt;/select&gt; &lt;input type=&#34;button&#34; value=&#34;Get Value&#34; onclick=&#34;getValue()&#34;/&gt; &lt;/body&gt; &lt;/html&gt; </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 = $(&#39;#sel option:selected&#39;); </code></pre> <p>如果您不想使用 jQuery,请忽略此答案并参考其他答案。</p> </answer> <answer tick="false" vote="3"> <p>使用 <strong><em>所选选项</em></strong> </p> <pre><code>for (var i = 0; i &lt; x.selectedOptions.length; i++) { alert(x.selectedOptions[i].value); } </code></pre> </answer> <answer tick="false" vote="0"> <pre><code>var obj = document.querySelectorAll(&#39;#sel option:checked&#39;); var result = Object.keys(obj).map((key) =&gt; [obj[key].value, obj[key].text]); alert(result); </code></pre> </answer> <answer tick="false" vote="0"> <p>相同示例的解决方案</p> <pre><code> &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;script&gt; function getValue() { var x = document.getElementById(&#34;sel&#34;); for (var i = 0; i &lt; x.options.length; i++) { if (x.options[i].selected == true) { alert(x.options[i].value); } } } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;select multiple=&#34;multiple&#34; id=&#34;sel&#34;&gt; &lt;option value=&#34;volvo&#34;&gt;Volvo&lt;/option&gt; &lt;option value=&#34;saab&#34;&gt;Saab&lt;/option&gt; &lt;option value=&#34;opel&#34;&gt;Opel&lt;/option&gt; &lt;option value=&#34;audi&#34;&gt;Audi&lt;/option&gt; &lt;/select&gt; &lt;input type=&#34;button&#34; value=&#34;Get Value&#34; onclick=&#34;getValue()&#34;/&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> </answer> <answer tick="false" vote="0"> <p>在支持 ECMAScript 2015 的现代浏览器中,您可以使用</p> <p><pre><code>let selectedValues = Array.from(multiSelectElement.options).filter(o=&gt;o.selected).map(o=&gt;o.value)</code></pre></p> <p>或(使用扩展运算符)</p> <p><pre><code>let selectedValues = [...multiSelectElement.options].filter(o=&gt;o.selected).map(o=&gt;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 &lt; 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(&#34;id&#34;)</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>

回答 0 投票 0

Laravel 5.4 中如何使用表单中的多个下拉列表从数据库中获取数据?

我有一个 Blade 视图,它基本上是一个由 3 个下拉值组成的表单,例如 Division、District 和 Upazila: 我的索引刀片如下图所示: 单击提交按钮后,它显示了我

回答 1 投票 0

如何设置默认值来动态选择标签?

我正在尝试向选择标签中的选项添加默认值。 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>。

回答 0 投票 0

不同的城市选择字段取决于 WooCommerce 中所选的国家/地区

在结账时,我为几个国家/地区进行了单独的城市选择(它们的值将进入隐藏的默认文本字段 billing_address_1)。城市选择是我自己做的,它们是个人的。 我也用p...

回答 1 投票 0

如何在组合框上添加名称/占位符/在 html 中选择

我想在选择上添加占位符或名称..我希望显示“宠物类型”,但会显示“宠物 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> 作为您的第一个选项,请参阅如何为“选择”框制作占位符?

回答 0 投票 0

使用 Angular 在更改事件处理程序中更改“选择”选择

有没有办法在其自己的更改事件处理程序中更改 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]

回答 0 投票 0

禁用某些输入的选择

'嘿,我想在检查我的 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>

回答 1 投票 0

如何在`select`控件中动态设置默认值

我正在订阅 HTTP 服务器以接收数据,之后我的选择控件将通过 Angular 框架加载数据。 我的目标是设置默认值。 我的默认值是...

回答 1 投票 0

如何动态设置 Angular 中 `select` 控件的默认值

我订阅http服务器以接收数据,之后我的选择控件通过角度框架加载数据。 我的目标是设置默认值。 我的默认值包括

回答 1 投票 0

在 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>。

回答 0 投票 0

无法从数据库获取数据

请看下面的代码: 主题: 请参阅下面的代码: <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> 属性从列表中预先选择值。

回答 1 投票 0

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...

回答 2 投票 0

使用 jQuery 时,边缘中的 <option> 上没有单击事件

刚刚发现,当单击选择选项时,MS Edge 中没有触发单击事件。 这是使用 jQuery 1.9.1 的代码: // data-hide - 在 data-hide 属性 onClick 中隐藏元素 ...

回答 1 投票 0

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

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

回答 8 投票 0

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

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

回答 1 投票 0

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