HTML选项框的设计以及根据不同选项的值对应不同的事件

文章目录

HTML选项框的设计

在前端页面的设计中,多选框的设计用select标签完成实现

  • 全部选项都显示的选项框
html 复制代码
<form>
	<select multiple="multiple">
			<option></option>
			<option>奥特曼</option>
			<option>奥特曼1</option>
			<option>奥特曼2</option>
	</select>
</form>

效果:

  • 展示只有一个块,选择通过下拉列表选择
html 复制代码
<select name="fruit">
  <option value="apple">苹果</option>
  <option value="banana">香蕉</option>
  <option value="orange">橙子</option>
</select>

效果图:

JS根据不同的选项框对应出不同的事件

  • 先找对select标签对应的元素
  • 再找到select标签被选中的索引
  • 然后根据索引和标签进行设置不同的事件
  • 简易流程:
html 复制代码
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 复制代码
<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选中的值

相关推荐
gongzemin4 分钟前
React 和 Vue3 在事件传递的区别
前端·vue.js·react.js
Apifox17 分钟前
如何在 Apifox 中通过 Runner 运行包含云端数据库连接配置的测试场景
前端·后端·ci/cd
树上有只程序猿44 分钟前
后端思维之高并发处理方案
前端
庸俗今天不摸鱼1 小时前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
黄毛火烧雪下1 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox2 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞2 小时前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行2 小时前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox
m0_593758102 小时前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox
掘金一周2 小时前
金石焕新程 >> 瓜分万元现金大奖征文活动即将回归 | 掘金一周 4.3
前端·人工智能·后端