drop-down-menu 相关问题

有没有办法在.yml文件中制作可点击的下拉菜单？

我有一个 YAML 文件，用于为我的网站创建导航栏。导航栏工作正常，但我想为其添加更多功能。具体来说，我希望能够点击某些

HTML 和 JavaScript 中的月份选择下拉列表

我在 HTML 中有 2 个下拉菜单，均代表月份。所以我想要像下面这样的验证。 如果我选择第一个下拉月份为四月，那么下一个下拉菜单应该从该月份开始...

使用 JavaScript 获取选定的选项文本

我有一个像这样的下拉列表： 狗 猫 鸟 &... 我有一个像这样的下拉列表： <select id="box1"> <option value="98">dog</option> <option value="7122">cat</option> <option value="142">bird</option> </select> 如何使用 JavaScript 获取实际的选项文本而不是值？ 我可以通过以下方式获得价值： <select id="box1" onChange="myNewFunction(this.selectedIndex);" > 但我想要的是7122，而不是cat。 尝试选项 function myNewFunction(sel) { alert(sel.options[sel.selectedIndex].text); } <select id="box1" onChange="myNewFunction(this);"> <option value="98">dog</option> <option value="7122">cat</option> <option value="142">bird</option> </select> 纯 JavaScript var sel = document.getElementById("box1"); var text= sel.options[sel.selectedIndex].text; jQuery： $("#box1 option:selected").text(); 据我所知，有两种解决方案。 两者都只需要使用vanilla javascript 1 个选定选项 现场演示 const log = console.log; const areaSelect = document.querySelector(`[id="area"]`); areaSelect.addEventListener(`change`, (e) => { // log(`e.target`, e.target); const select = e.target; const value = select.value; const desc = select.selectedOptions[0].text; log(`option desc`, desc); }); <div class="select-box clearfix"> <label for="area">Area</label> <select id="area"> <option value="101">A1</option> <option value="102">B2</option> <option value="103">C3</option> </select> </div> 2 个选项 现场演示 const log = console.log; const areaSelect = document.querySelector(`[id="area"]`); areaSelect.addEventListener(`change`, (e) => { // log(`e.target`, e.target); const select = e.target; const value = select.value; const desc = select.options[select.selectedIndex].text; log(`option desc`, desc); }); <div class="select-box clearfix"> <label for="area">Area</label> <select id="area"> <option value="101">A1</option> <option value="102">B2</option> <option value="103">C3</option> </select> </div> 所有这些功能和随机的东西，我认为最好使用这个，并且这样做： this.options[this.selectedIndex].text HTML： <select id="box1" onChange="myNewFunction(this);"> JavaScript： function myNewFunction(element) { var text = element.options[element.selectedIndex].text; // ... } 演示：http://jsfiddle.net/6dkun/1/ 使用- $.trim($("select").children("option:selected").text()) //cat 这是小提琴 - http://jsfiddle.net/eEGr3/ ECMAScript 6+ const select = document.querySelector("#box1"); const { text } = [...select.options].find((option) => option.selected); 使用普通 JavaScript onChange = { e => e.currentTarget.options[e.selectedIndex].text } 如果值在循环内，将为您提供准确的值。 使用 Typescript 在 React 上获取它： const handleSelectChange: React.ChangeEventHandler<HTMLSelectElement> = (event) => { const { options, selectedIndex } = event.target; const text = options[selectedIndex].text; // Do something... }; 使用jquery。 在您的活动中 let selText = $("#box1 option:selected").text(); console.log(selText); function runCode() { var value = document.querySelector('#Country').value; window.alert(document.querySelector(`#Country option[value=${value}]`).innerText); } <select name="Country" id="Country"> <option value="IN">India</option> <option value="GBR">United Kingdom </option> <option value="USA">United States </option> <option value="URY">Uruguay </option> <option value="UZB">Uzbekistan </option> </select> <button onclick="runCode()">Run</button> 您可以使用 getSelected() 方法获取包含所选项目的类似数组的对象。像这样： querySelector('#box1').getSelected() 因此您可以使用 .textContent 属性提取文本。像这样： querySelector('#box1').getSelected()[0].textContent 如果您有多个选择框，您可以循环遍历类似数组的对象 希望对你有帮助😎👍 var Selectionlist=document.getElementById("代理"); td2.innerHTML=selectionlist.children[selectionlist.selectedIndex].innerHTML; 您需要获取选项的innerHTML，而不是其值。 使用 this.innerHTML 而不是 this.selectedIndex。 编辑：您需要先获取选项元素，然后使用innerHTML。 使用 this.text 而不是 this.selectedIndex。 <select class="cS" onChange="fSel2(this.value);"> <option value="0">S?lectionner</option> <option value="1">Un</option> <option value="2" selected>Deux</option> <option value="3">Trois</option> </select> <select id="iS1" onChange="fSel(options[this.selectedIndex].value);"> <option value="0">S?lectionner</option> <option value="1">Un</option> <option value="2" selected>Deux</option> <option value="3">Trois</option> </select><br> <select id="iS2" onChange="fSel3(options[this.selectedIndex].text);"> <option value="0">S?lectionner</option> <option value="1">Un</option> <option value="2" selected>Deux</option> <option value="3">Trois</option> </select> <select id="iS3" onChange="fSel3(options[this.selectedIndex].textContent);"> <option value="0">S?lectionner</option> <option value="1">Un</option> <option value="2" selected>Deux</option> <option value="3">Trois</option> </select> <select id="iS4" onChange="fSel3(options[this.selectedIndex].label);"> <option value="0">S?lectionner</option> <option value="1">Un</option> <option value="2" selected>Deux</option> <option value="3">Trois</option> </select> <select id="iS4" onChange="fSel3(options[this.selectedIndex].innerHTML);"> <option value="0">S?lectionner</option> <option value="1">Un</option> <option value="2" selected>Deux</option> <option value="3">Trois</option> </select> <script type="text/javascript"> "use strict"; const s=document.querySelector(".cS"); // options[this.selectedIndex].value let fSel = (sIdx) => console.log(sIdx, s.options[sIdx].text, s.options[sIdx].textContent, s.options[sIdx].label); let fSel2= (sIdx) => { // this.value console.log(sIdx, s.options[sIdx].text, s.options[sIdx].textContent, s.options[sIdx].label); } // options[this.selectedIndex].text // options[this.selectedIndex].textContent // options[this.selectedIndex].label // options[this.selectedIndex].innerHTML let fSel3= (sIdx) => { console.log(sIdx); } </script> // fSel 但是： <script type="text/javascript"> "use strict"; const x=document.querySelector(".cS"), o=x.options, i=x.selectedIndex; console.log(o[i].value, o[i].text , o[i].textContent , o[i].label , o[i].innerHTML); </script> // .cS" 还有这个： <select id="iSel" size="3"> <option value="one">Un</option> <option value="two">Deux</option> <option value="three">Trois</option> </select> <script type="text/javascript"> "use strict"; const i=document.getElementById("iSel"); for(let k=0;k<i.length;k++) { if(k == i.selectedIndex) console.log("Selected ".repeat(3)); console.log(`${Object.entries(i.options)[k][1].value}`+ ` => ` + `${Object.entries(i.options)[k][1].innerHTML}`); console.log(Object.values(i.options)[k].value , " => ", Object.values(i.options)[k].innerHTML); console.log("=".repeat(25)); } </script> 尝试以下方法： myNewFunction = function(id, index) { var selection = document.getElementById(id); alert(selection.options[index].innerHTML); }; 参见这里 jsfiddle 示例 通过使用addEventListener()，我们可以获取选项的文本、值、属性。 <select id="box1"> <option value="98">dog</option> <option value="7122">cat</option> <option value="142" size="small">bird</option> //Added extra attribute for attribute example </select> 通过“JavaScript”： let selectText = document.getElementById("box1"); selectText.addEventListener("change", (event) => { console.log(selectText.options[selectText.selectedIndex].text); }); //console.log(selectText.options[selectText.selectedIndex].value); //selectText.options[selectText.selectedIndex].getAttribute("size")); //small

选择后面的按钮也被单击（使用Shadcn）

我构建了一个表单，用户可以在其中选择下拉菜单，从中选择产品类别。我使用的是 Shadcn 中的一个选择。当我打开选择并选择一个类别时，它会触发按钮

MAUI 下拉/选择

如何在 MAUI 中创建类似的下拉/选择。有什么可能的例子吗？我只需要为数据验证制作一个工具提示，以便它显示在 HTML 位置中的所有类型元素的顶部...

多个下拉框

我正在尝试构建一个类似于下面的表单（出于隐私原因我更改了内容），并且我无法弄清楚如何在不使单独的下拉框相互抵消的情况下构建此表单。 我是...

需要在 Google 表格中从多个下拉列表到包含逗号分隔值的单元格进行查询

我有一个包含数据（A、B、C 列）、下拉列表 (E) 和该下拉列表来源 (G) 的 Google 表格 https://docs.google.com/spreadsheets/d/1XY5Nfwi-DtXIV7PMkhax_60EpX5puawmUF-fl2qvEqk/编辑...

如何使 jQuery UI 可通过嵌套下拉菜单进行排序？

我已阅读与此处发布的问题类似的所有内容，但没有找到任何解决方案。 我创建了一个菜单，在下拉菜单中包含子菜单条目。所有菜单条目都可分类到所有菜单级别。 ...

react-native-dropdown-picker 无法从 renderlistitem 中选择项目

我在使用 RenderListItem 自定义列表项时遇到了麻烦。 我无法单击该列表中的项目，但我可以在普通列表（没有渲染列表）上执行此操作。 谁能解释为什么？

BS4 并请求仅查找和抓取下拉列表中第一个列出的项目

我编写了一个抓取工具，用于从 2 个不同的 URL 获取一些数据。两个页面之间的唯一区别在于，一个页面有菜单下拉列表，而另一个页面则没有。刮刀

尝试创建一个下拉列表，能够根据选择（日历月份）过滤掉所有其他列

我有一个相当粗糙的电子表格，它在不同的列中跟踪每个月的简单每月数据。我希望在单元格 B6 或 C6 中创建一个下拉列表，允许用户选择

在 Grails g:select 中，使用枚举，显示枚举键，但使用值作为选项的值

我想使用 g:select 标签生成一个选择框，其中枚举的键向用户显示，而枚举的值在提交表单时传递，使用以下...

如何在flutter中显示按钮的下拉列表

我想从底部开始下拉列表，这是我的下拉代码 容器（ 身高：55.0， 宽度：MediaQuery.of(context).size.w...

如何在没有任何第三方库的情况下实现多复选框下拉

如何在没有任何第三方库的情况下实现多复选框下拉菜单。 我们想要一个具有 jquery 和 javascript 中没有的复选框的下拉菜单。我们想要纯粹的服务器端控制 .

如何协调下拉列表的 CSS 事件 :hover 与更改颜色的 :hover 事件？

所以我正在用极其有限的经验编写我的第一个网站。 当鼠标悬停在导航栏项目链接上时，它们会变成红色并带有下划线。然而，下拉菜单的悬停事件设置为...

React：“选定”属性不适用于多个 <select> 元素

我有一个 React 组件，它有多个 （不是反应选择）元素。仅根据其中一项道具渲染一个 ： 类 SelectGroup 扩展组件 { ...

页脚在不同的 select2 下拉菜单下方添加多次

我正在使用 select 2 jquery 插件创建多个多选下拉菜单，在某些情况下，页脚会在下拉菜单下多次附加。例如，如果您打开 drodpow...

根据数据验证下拉列表返回偏移单元格值

我有一个发票模板，其中 Sheet1!A10 中包含数据验证下拉列表，列表位置位于 Sheet3!B2:B4 中。 我想根据下拉选择返回 Sheet3!A2:A4 中的值（Shee...

如何解决codeigniter中的动态多个下拉菜单问题？

我有一个通过从数据库中获取标题动态生成的菜单。我通过添加列 p_id 为子页面设置了相同的表。 我的代码看起来像这样。 私有$Section = array(); 功能...

如何用mootools制作多级下拉导航？

我是 mootools 的新手，我想要多级导航。我不想在子无序列表上使用类。 喜欢： 菜单... 我是 mootools 的新手，我想要多级导航。我不想在子无序列表上使用类。 喜欢： <ul id="navigation"> <li><a href="#">menu 1</a> <ul> <li><a>menu 1 sub1</a></li> <li><a>menu 1 sub2</a> <ul> <li><a>menu 1 sub2 sub1</a></li> </ul> </li> </ul> </li> 任何帮助将不胜感激。 我最近使用了 http://mootools.net/forge/p/moodropmenu ，这很简单。注意：该演示使用 MooTools 1.2 http://www.aryweb.nl/projects/MooDropMenu/ ，但查看源代码我认为它也应该适用于 1.3 nocompat 。 看看这个：MenuMatic