已解决
HTML选项框的设计以及根据不同选项的值对应不同的事件
来自网友在路上 158858提问 提问时间：2023-10-23 04:21:14阅读次数： 58
最佳答案 问答题库588位专家为你答疑解惑
文章目录
- HTML选项框的设计
- JS根据不同的选项框对应出不同的事件
HTML选项框的设计
在前端页面的设计中，
多选框的设计用select标签完成实现
- 全部选项都显示的选项框
<form><select multiple="multiple"><option></option><option>奥特曼</option><option>奥特曼1</option><option>奥特曼2</option></select>
</form>
效果：
- 展示只有一个块，选择通过下拉列表选择
<select name="fruit"><option value="apple">苹果</option><option value="banana">香蕉</option><option value="orange">橙子</option>
</select>
效果图：
JS根据不同的选项框对应出不同的事件
- 先找对
select标签对应的元素 - 再找到
select标签被选中的索引 - 然后根据索引和标签进行设置不同的
事件 - 简易流程：
var mySelect = document.getElementById("testSelect"); //定位id（获取select）
var index = mySelect.selectedIndex; //选中索引（选取select中option选中的第几个）
var text = mySelect.options[index].text; //获取选中文本
var value = mySelect.options[index].value; //获取选中值
mySelect.options[index].selected //判断select中的某个option是否选中，true为选中，false为未选中
一个实际例子：
<html>
<head><script>function sel() {var mySelect = document.getElementById("testSelect"); //定位id（获取select）var index = mySelect.selectedIndex; //选中索引（选取select中option选中的第几个）var text = mySelect.options[index].text; //获取选中文本，即option标签对之间的文字var value = mySelect.options[index].value; //获取选中值document.getElementById("show_index").innerHTML = index;document.getElementById("show_text").innerHTML = text;document.getElementById("show_value").innerHTML = value;if (mySelect.options[2].selected) { //注意index是从0开始的document.getElementById("show_isSelected").innerHTML = "选中了";} else {document.getElementById("show_isSelected").innerHTML = "没选中";}}</script>
</head>
<body><select id="testSelect" onchange="sel()"><option id="op_1" value="Deep Learning">深度学习</option><option id="op_2" value="Machine Learning">机器学习</option><option id="op_3" value="Data Mining">数据挖掘</option><option id="op_4" value="Image Processing">图像处理</option></select><br><hr><font color="red">选中的option索引：</font><p id="show_index"></p><hr><font color="red">选中的option文本：</font><p id="show_text"></p><hr><font color="red">选中的option的值：</font><p id="show_value"></p><hr><font color="red">“数据挖掘”选项是否被选中：</font><p id="show_isSelected"></p>
</body>
</html>效果图：
参考文献： JavaScript和jQuery如何判断select是否被选中并获取select选中的值
查看全文
99%的人还看了
相似问题
- Win10 电源选项那选择“关闭显示器“为1分钟，1分钟后就锁屏了？怎么才能关闭显示器后不锁屏
- css实现原生form表单label必填选项红色*样式，以及js控制必填校验
- QEMU显示虚拟化的几种选项
- 2023版Idea创建JavaWeb时，右键new没有Servlet快捷键选项
- 在 Python 中使用 Selenium 从下拉菜单中选择选项
- [MT8766][Android12] 系统设置隐藏休眠时间和锁屏选项
- 4-爬虫-selenium(等待元素加载、元素操作、操作浏览器执行js、切换选项卡、前进后退异常处理)、xpath、动作链
- Bash 4关联数组：错误“声明：-A：无效选项”
- MySQL 启动选项和字符集
- day39（VueJS）vuejs的概念与要点，选项种类，经典案例，双向绑定的底层原理
猜你感兴趣
版权申明
本文"HTML选项框的设计以及根据不同选项的值对应不同的事件"：http://eshow365.cn/6-22137-0.html 内容来自互联网，请自行判断内容的正确性。如有侵权请联系我们，立即删除！