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

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

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

Angular 的多列选择

我正在尝试找到一个支持多列选择的开源 Angular 库。我的意思是一个图书馆，其中的项目将排列在多列中，而不是每个项目都有......

从 JavaScript 和 CSS 的下拉列表中选择值时，如何在 InnerHTML 中包含空格？

如何将空格包含到 InnerHTML 的值中？ 所以我从下拉列表中选择一个值，将数组列表作为我的 JS 文件中的常量。 const AppleList = ['iPhone 6s' , 'iPhone...

如何更改隐藏<option>的文字颜色？

我想更改隐藏选项的文本颜色。 隐藏选项应显示为占位符文本而不是可选选项。 我试图将样式直接放在元素上，但是没有...

我如何设置“选择”部分和“选项”部分的样式，它们也具有多选功能？

我网站的问题是我无法设置一些“选择”和“选项”部分的样式，我还在其中添加了多选功能。这是我遇到问题的代码部分： ...

如何设置“选择”部分的样式，它也具有多选功能？

我网站的问题是我无法设置一些“选择”和“选项”部分的样式，我还在其中添加了多选功能。这是我遇到问题的代码部分： ...

Rails/Ruby select_tag 和选择不工作

rails select_tag 和 selected 属性有问题，因为它似乎没有传递选定的值，只有所有项目都传递给控制器。 在视图下方的表单块中， rails select_tag 和 selected 属性有问题，因为它似乎没有传递选定的值，只有所有项目都传递给控制器。 在表单块下方的视图中， <div class="col-md-2"> <div class="form-group"> <%= label_tag 'Exportações' %> <br/> <div class="input-group"> <%= select_tag :status, options_for_select(statuses.map { |status| [status, status] }, :selected => params[:status]), :multiple => true, :prompt => 'All', :class => 'form-control shadow-sm form-control-sm'%> <div class="input-group-append"> <%= link_to admin_status_export_path, class: 'btn btn-sm btn-dark ml-4', method: :post do %> <%= icon('fas', 'file-excel ', ' Exportaçõ') %> <% end %> </div> </div> </div> </div> 目前，为了识别个人状态（白名单等），在控制器中仅输出为 json，比较发送到 DB 中所有项目的内容： def customers_status_export @customers = Customer.where(status_trust: %w[blacklist whitelist normal]) @status = params[:status] if @status.present? @customers = @customers.where(status_trust: @status) end render json: @customers When one item is selected in the view (whitelist, of which 4 are in DB, and whitelist, blacklist and normal in the select box.) we still get all the items as json, when only want for now the 4 whitelist items, so the selected param in the select_tag is not catching whitelist? 状态是从 uniq 之前对 db 的调用映射的，如果再添加更多，最好在 select_tag 中对它们进行硬编码，还是有其他影响？ （其他一切都很好，包括完成时的 csv 文件下载，这是所有项目，而不是仅列入白名单并选中的 4 个项目） 欢迎任何提示？ 谢谢 options_for_select 基本上输入是第一个参数的数组，第二个参数直接是它的值。 options_for_select([ "VISA", "MasterCard" ], "MasterCard") # above is an array and the second parameter is the selected value 你的问题 # if statuses is an array options_for_select(statuses.map { |status| status }, params[:status]) # if statuses is a record options_for_select(statuses.map { |status| status.put_here_field_name }, params[:status]) 编辑 2：options_from_collection_for_select options_from_collection_for_select(collection, value_method, text_method, selected = nil) # since you want more than one selected items I think this can help in controller / other place @selected_reason_array = ['abc', 'def'] options_from_collection_for_select(@reasons, "id", "text", selected: @selected_reason_array) # pay attentions to second and third parameters # @reasons are your records that automatically will be looped

来自 Ajax 的 Jquery 动态列表：选择选项不起作用

我正在使用 ajax/jquery 加载商店列表，但是当用户选择商店时，它不会在页面刷新时保持选中该选项。它一直回到默认值（查看全部），我试过做 cfif

如何使用 Groovy 从选项列表中选择文本？

我想知道如何从选项列表中选择文本而不是值（HTML 形式）。 如果我运行以下命令： def optionName = getFieldByName('SelectName') 它总是返回我...

如何在 SQL 中保存选择菜单的名称和值？

假设我们有一个简化的菜单示例： 假设我们有一个简化的菜单示例： <?php for ($w=0; $w<10; $w++){ ?> <div class="col-md-12"> <div class="form-group"> <select class="form-control" name="<?php echo 'Brandt['.$w.']';?>[Color]" id="<?php echo 'IDBrandt['.$w.']';?>[Color]"> <option value="value1"> Text1</option> <option value="value2"> Text2</option> ....... </select> <input type="text" class="form-control" hidden> </div> </div> <?php } ?> 我已经将菜单的值发送到我的数据库，但我想保存和实际选择菜单文本（如 Text1、Text2..）。我想在这个隐藏的输入字段中创建，所选菜单的名称，以便能够将值和名称=文本保存在我的数据库中.. 例如，我希望这个输入字段有一个 <input type="text" name="SavedText" value = "<?PHP echo //Text of Selected Menu ?> "class="form-control" hidden> 我想避免使用 Javascript（如果可能的话）使用“on change”脚本来完成它......理想情况下，我什至想避免用隐藏的输入字段显示它并将它直接保存到 php 变量中......如果可能的话……有什么帮助吗？ 如果我理解正确，您希望在您的 <option> 中以标准形式发布任何给定的选定 <select> two“值”。仅发布一个“值”，因此如果您想要该值中的两条数据，则需要包含这些数据。例如，考虑这个 <option> 元素： <option value="value1|Text1"> Text1</option> 如果选中，则在发布表单时，将为给定的 "value1|Text1" 元素发布值 <select>。然后在您的服务器端代码中，您可以通过从已知的分隔符（在本例中为竖线字符）中拆分值来解析这两条信息。 请注意，您 可能不需要这样做。通常，<select> 中的“值”通常是某种引用某处数据的唯一标识符。该数据用于填充这些<option> 元素。 （尽管在您的示例中，这些似乎是硬编码的。但即使是硬编码的查找数据仍然是查找数据。） 所以一般你真的只需要将"value1"发布到服务器，然后服务器端代码可以使用该标识符来查找/推断"Text1"部分。有例外情况和需要多个值的用例，但这些情况往往非常罕见，因此值得检查一下您是否需要在这里这样做。

使用 jQuery 向 <select> 添加选项？

使用 jQuery 向下拉列表添加选项的最简单方法是什么？ 这行得通吗？ $("#mySelect").append('我的选择');

如何滚动选择列表中的选项？关于答案的问题

原始问题发布在这里：Set current item in a HTML , but in the middle 在作者提出的问题中：“如何使所选项目出现在中间...... 原始问题发布在这里：在 HTML 中设置当前项目，但在中间 在作者提出的问题中：“如何使所选项目出现在列表视图的中间，或者，或者，在列表视图的顶部？” 这是关于@OstoneO 发布的惊人答案的问题！我看不懂他的代码是如何工作的，所以我的代码占据了更多的位置，但这是理解他发布的代码的唯一解决方案。 尤其是这里： const selected = l.options[l.selectedIndex]; const intoView = (block = 'center') => selected.scrollIntoView({ block }); intoView(); 所以我花了很多时间以“我的方式”写它，现在我几乎能够理解他现在做了什么。 所以这是一个与答案相关的问题... 我先把我的代码写成一个片段，而不是 OstoneO 的片段。 像下面这样写也是正确的吗，我想知道这是否会导致执行速度比第二个片段慢（我想是的）... 我真的不明白“最近”这个选项是什么意思。 如果我在“结束”之后单击“最近”，似乎没有任何变化，“开始”或“中心”之后的“最近”也是如此。 在我的例子中，为了在开始时初始化滚动位置，我不得不创建另一个函数initList(position)，因为我不能在var type = this.name;中调用var type = event.target.name;或initList(position)是否有一个周转，一个避免添加另一个的技巧启动时的功能？ 有人可以帮我解释一下这些细节，以及为什么在这种情况下使用“onClick”似乎比向按钮添加事件监听器更有效。 这是我的代码片段： window.addEventListener("DOMContentLoaded",init); let selectContainer,selector,selectionDisplay; let selectorLength = 100; let buttons; let defaultScroll = "center"; function init(){ selectContainer = document.getElementById("selectContainer"); selector = document.getElementById("selector"); selectionDisplay = document.getElementById("selectionDisplay"); buttons = document.getElementById("buttons").getElementsByTagName("button"); for(var i = 1; i<= selectorLength; i++){ addElement (selector, i, i); } for (var j = 0; j < buttons.length; j++){ buttons[j].addEventListener("click",intoView); } selector.value = 17; initList(defaultScroll); selector.addEventListener("change",getOptValue); getOptValue(); } function addElement(target, value, textContent) { const newOption = document.createElement("option"); newOption.value = value; const newContent = document.createTextNode("element " + textContent); newOption.appendChild(newContent); target.appendChild(newOption); getOptValue(); } function getOptValue(e){ selectionDisplay.textContent = selector.value; } function intoView(event){ var type = this.name; var selected = selector.options[selector.selectedIndex]; selected.scrollIntoView({ block:this.name }); } function initList(position){ var type = position; var selected = selector.options[selector.selectedIndex]; selected.scrollIntoView({ block:type }); } <div id="selectContainer"> <select id="selector" size="7"> <option value="null" disabled>select a value</option> </select> </div> <div id="buttons"> <br> <button name="start">Start</button> <button name="center">Center</button> <button name="nearest">Nearest</button> <button name="end">End</button> <br> </div> <div id="selectionDisplay"> default value </div> 这是 OstoneO 发布的片段... var l = document.getElementById("list"); for (var i = 0; i < 100; i++) { l.innerHTML += "<option value='" + i + "'>" + i + "</option>"; } l.value = 17; // Demo const selected = l.options[l.selectedIndex]; const intoView = (block = 'center') => selected.scrollIntoView({ block }); intoView(); #list { width: 100px; } <select id="list" multiple size=10></select> <!-- DEMO --> <br /> <button onclick='intoView("start");'>Start</button> <button onclick='intoView();'>Center</button> <button onclick='intoView("nearest");'>Nearest</button> <button onclick='intoView("end");'>End</button> <!-- /DEMO --> 祝你有美好的一天，并致以最诚挚的问候。

如何在 HTML 和 CSS 中更改 select 的占位符选项？

我正在尝试更改值为“”的选择选项的颜色。 这是我的 HTML： ...

如何从下拉菜单中选择跨度下定义的元素

大家好，你们能帮我吗？ 由于我无法从更好的视觉效果中选择范围内的下拉菜单中的元素： 这是html代码： 大家好，你们能帮我吗？ 因为我无法从跨度的下拉菜单中选择元素，从更好的视觉： 这里是html代码： <input type="search" autocomplete="none" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_0_list" aria-autocomplete="list" aria-controls="rc_select_0_list" aria-activedescendant="rc_select_0_list_0" readonly="" unselectable="on" value="" style="opacity: 0;" id="rc_select_0" aria-expanded="false"> 使用 selenium 中的以下解决方案，我能够扩展下拉列表（我在这里找到的解决方案）： WebElement dropDown = (WebElement)Driver.Instance.FindElement(By.XPath("//*[@id=\"root\"]/main/section/form/div/div[1]/div[1]/div[1]/div/div/div")); 但在那之后，我尝试了几十个选项，但我无法选择任何元素。为了获得更好的视觉效果，这里是下拉列表中所有项目的跨度： <span class="ant-select-selection-item" title="Mr.">Mr.</span> <span class="ant-select-selection-item" title="Mrs.">Mrs.</span> <span class="ant-select-selection-item" title="Dr.">Dr.</span> <span class="ant-select-selection-item" title="Prof.">Prof.</span> 这实际上不是一个 SELECT 元素，它是一个看起来像普通下拉列表的元素集合。您需要单击顶级元素以打开下拉列表，然后在所需元素可见后选择它。 单击“教授”的示例代码“称呼”标签下的选项： WebDriverWait wait = new WebDriverWait(driver, TimeSpan.FromSeconds(10)); wait.Until(ExpectedConditions.ElementToBeClickable(By.XPath("//div[.//label[text()='Salutation']//div[@class='ant-select-selection']"))).Click(); wait.Until(ExpectedConditions.ElementToBeClickable(By.XPath("//div[.//label[text()='Salutation']//span[@class='ant-select-selection-item'][@title='Prof.']"))).Click(); 我假设你会不止一次地使用它......你需要设置称呼，名字，姓氏等。我会把它放在一个方法中以使其更易于使用。 /// <summary> /// Selects an option from the dropdown based on the label and desired option. /// </summary> /// <param name="label">The dropdown label.</param> /// <param name="option">The option to be chosen from the dropdown.</param> public void SelectOption(string label, string option) { WebDriverWait wait = new WebDriverWait(driver, TimeSpan.FromSeconds(10)); wait.Until(ExpectedConditions.ElementToBeClickable(By.XPath($"//div[.//label[text()='{label}']//div[@class='ant-select-selection']"))).Click(); wait.Until(ExpectedConditions.ElementToBeClickable(By.XPath($"//div[.//label[text()='{label}']//span[@class='ant-select-selection-item'][@title='{option}']"))).Click(); } 然后像这样称呼它 SelectOption("Salutation", "Prof."); 在杰夫的帮助下过了一会儿。我能够从下拉列表中选择元素。这是一个代码 ///扩展下拉列表 WebDriverWait wait = new WebDriverWait(Driver.Instance, TimeSpan.FromSeconds(50)); wait.Until(ExpectedConditions.ElementToBeClickable(By.XPath("//*[@id=\"root\"]/main/section/form/div/div[1]/div[1]/div[1]/div/div"))).Click(); ///从下拉列表中选择元素 wait.Until(ExpectedConditions.ElementToBeClickable(By.XPath("/html/body/div[3]/div/div/div/div[2]/div[1]/div/div/div[1]/div"))).Click();