drop-down-menu 相关问题

用户界面控件GUI元素，类似于列表框，允许用户从列表中选择一个值。当下拉列表处于非活动状态时，它会显示单个值。激活后，它会显示（下拉）一个值列表，用户可以从中选择一个值。

Flutter 中如何自定义 DropdownButtons 和 DropdownMenuItems？

带有 DropdownMenuItems 的默认 DropdownButton 返回浅灰色下拉菜单。我应该如何自定义下拉菜单（例如背景颜色、下拉菜单宽度）？我可以更改两者的样式属性

drop-down-menu widget dropdown flutter

回答 12 投票 0

我想创建一个迷你项目来测试我的 CSS 技能，所以我决定创建一个下拉菜单。所以我开始编写 HTML 代码：超文本标记语言我想创建一个迷你项目来测试我的 CSS 技能，所以我决定创建一个下拉菜单。所以我开始编写 HTML 代码： HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Hover menu</title> <link rel="stylesheet" href="CSS/style.css" /> </head> <body> <div class="wrapper"> <div> <button class="btn"> User Profile <img class="chevron" src="image/chevron.svg" alt="" /> </button> <div class="drop-down"> <ul> <li>Basket</li> <li>Edit</li> <li>Courses</li> <li>Logout</li> </ul> </div> </div> </div> </body> </html> 然后我写了CSS代码，我认为这是有问题的部分，但我检查了几个小时都找不到它 CSS @font-face { font-family: "Poppins"; src: local("Poppins"), url(../font/Poppins-Regular.ttf) format(truetype); } html { box-sizing: border-box; } * { list-style: none; margin: 0px; padding: 0px; } *, *::after, *::before { box-sizing: inherit; } body { font-family: "Poppins"; } .wrapper { display: flex; justify-content: center; align-items: center; min-height: 100vh; } .btn { position: relative; color: #fff; background-color: #1565c0; border: none; border-radius: 5px; font-size: 20px; padding: 10px; cursor: pointer; transition: all 400ms; } .chevron { width: 20px; vertical-align: middle; transition: all 300ms linear; } .drop-down { position: absolute; text-align: center; border-radius: 5px; box-shadow: 1px 1px 10px 0px gray; visibility: hidden; opacity: 0; transition: all 400ms ease-out; } .drop-down ul li { width: 150px; border-radius: 2px; padding: 5px; transition: all 200ms linear 100ms; cursor: pointer; } /* Actions */ .btn:hover { background-color: #0d47a1; } .btn:hover .chevron { transform: rotate(180deg); } .btn:hover + .drop-down, .drop-down:hover { transform: translate(0px, 10px); visibility: visible; opacity: 1; } > Looks like hover is not working here!!!! .btn:hover .chevron, .drop-down:hover .chevron { transform: rotate(180deg); } .drop-down ul li:hover { color: #fff; background-color: #1565c0; } 我预计在悬停按钮然后悬停下拉列表后，悬停按钮时旋转的 V 形会保持其旋转，请帮忙。如果您将鼠标悬停在按钮上，他们将光标移动到下拉菜单您将不再悬停在按钮上。移动下拉 div 内的按钮，并调整 CSS 以隐藏/显示悬停时的 ul。 html { box-sizing: border-box; } * { list-style: none; margin: 0px; padding: 0px; } *, *::after, *::before { box-sizing: inherit; } body { font-family: "Poppins"; } .wrapper { display: flex; justify-content: center; align-items: center; min-height: 100vh; } .btn { position: relative; color: #fff; background-color: #1565c0; border: none; border-radius: 5px; font-size: 20px; padding: 10px; cursor: pointer; transition: all 400ms; } .chevron { width: 20px; vertical-align: middle; transition: all 300ms linear; filter: invert(100%) } .drop-down { position: relative; } .drop-down ul { position: absolute; visibility: hidden; opacity: 0; text-align: center; border-radius: 5px; box-shadow: 1px 1px 10px 0px gray; transition: all 400ms ease-out; } .drop-down ul li { width: 150px; border-radius: 2px; padding: 5px; transition: all 200ms linear 100ms; cursor: pointer; } /* Actions */ .btn:hover { background-color: #0d47a1; } .btn:hover .chevron { transform: rotate(180deg); } .btn:hover+.drop-down ul, .drop-down:hover ul { transform: translate(0px, 10px); visibility: visible; opacity: 1; } .btn:hover .chevron, .drop-down:hover .chevron { transform: rotate(90deg); } .drop-down ul li:hover { color: #fff; background-color: #1565c0; }<div class="wrapper"> <div class="drop-down"> <button class="btn"> User Profile <img class="chevron" src="https://icons.iconarchive.com/icons/fa-team/fontawesome/256/FontAwesome-Chevron-Right-icon.png" alt="" /> </button> <ul> <li>Basket</li> <li>Edit</li> <li>Courses</li> <li>Logout</li> </ul> </div> </div>

html css drop-down-menu hover

回答 1 投票 0

访问 Aria 标签和下拉菜单选择 - Selenium Python

我在尝试自动使用硒进入站点设置并将不安全内容下拉菜单从阻止更改为允许时遇到困难。我采取的每一种方法都会得到错误的元素...

python selenium-webdriver automation drop-down-menu

回答 1 投票 0

Html 网页标签相对于下拉菜单

创建一个 HTML 网页，我想将多个下拉菜单全部放置在特定位置，同时还相对于各个下拉菜单的位置在上方显示一个标签。这是我的

html css drop-down-menu label

回答 1 投票 0

将引导下拉菜单类更改为 Wordpress 子菜单类

我想使用引导程序“dropdown-menu”更改为wordpress自动生成的默认“子菜单”类，并使用引导程序的“dropdown”更改“has-children”。我知道这是可以实现的...

php wordpress drop-down-menu twitter-bootstrap-3 wordpress-theming

回答 2 投票 0

根据另一个选择中选择的值过滤选择（下拉）选项

我下面的代码使用结果数组中的值填充选择。 - 我想要做的是创建一个额外的选择，它将根据所选的值 {tag} 过滤结果。对于

javascript api filter drop-down-menu

回答 3 投票 0

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

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

html drop-down-menu yaml schema.yml

回答 1 投票 0

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

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

javascript html drop-down-menu

回答 2 投票 0

使用 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

javascript html dom drop-down-menu

回答 0 投票 0

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

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

forms next.js drop-down-menu shadcnui

回答 1 投票 0

MAUI 下拉/选择

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

c# .net select drop-down-menu maui

回答 1 投票 0

多个下拉框

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