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选中的值

相关推荐
DN金猿10 分钟前
使用npm install或cnpm install报错解决
前端·npm·node.js
丘山子11 分钟前
一些鲜为人知的 IP 地址怪异写法
前端·后端·tcp/ip
志存高远6623 分钟前
Kotlin 的 suspend 关键字
前端
www_pp_35 分钟前
# 构建词汇表:自然语言处理中的关键步骤
前端·javascript·自然语言处理·easyui
天天扭码1 小时前
总所周知,JavaScript中有很多函数定义方式,如何“因地制宜”?(ˉ﹃ˉ)
前端·javascript·面试
一个专注写代码的程序媛1 小时前
为什么vue的key值,不用index?
前端·javascript·vue.js
장숙혜1 小时前
ElementUi的Dropdown下拉菜单的详细介绍及使用
前端·javascript·vue.js
火柴盒zhang1 小时前
websheet之 编辑器
开发语言·前端·javascript·编辑器·spreadsheet·websheet
某公司摸鱼前端2 小时前
uniapp 仿企微左边公司切换页
前端·uni-app·企业微信
WKK_2 小时前
uniapp自定义封装tabbar
前端·javascript·小程序·uni-app