什么是select
selectobject 是一个标签,它提供了一个用于显示下拉选项并允许用户进行选择的界面。
将选项标签作为子元素添加到选择标签。此选项标签成为一个选择。
<select> <option></option> <option></option> </select>
可以指定两个选项:要在 HTML 上显示的值和文本。
例如,要选择一个年级,请将值设置为“1”并将文本设置为“一年级”。该值应该是易于以编程方式处理的值。文本使用人类可读的值。
获取文本值的写法
选择选项卡的处理方式与其他选项卡略有不同。因为你真正要处理的是下拉选择的选项的值。
select 标签有一种机制可以识别实际选择的元素(选项)。那就是 selectedIndex。它是一种可以获取选定索引并像数组一样返回从 0 开始的目标索引的方法。
使用它来获取所选选项的值和文本。
获取选择对象的文本值
<!DOCTYPE html> <html> <head> </head> <body> <p>血型: <select id="blood" name="blood"> <option value="A">A型</option> <option value="B">B型</option> <option value="O">O型</option> <option value="AB">AB型</option> </select> </p> <p id="selectblood"></p> </body> <script> var blood = document.getElementById('blood'); blood.addEventListener('change', (event) => { var selectblood = document.getElementById('selectblood'); selectblood.textContent = blood.options[blood.selectedIndex].value + ":" + blood.options[blood.selectedIndex].textContent; }); </script> </html>
结语
select对象主要用在与表单(server.select)交换数据时。
查询、用户注册等)经常使用,但也可以像这次一样单独使用。每个人都应该尝试一下。