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

news2024/11/22 17:12:56

文章目录

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1119727.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

google登录k8s dashboard ui显示“您的连接不是私密连接”问题解决梳理

1.问题描述 OS Version:CentOS Linux release 7.9.2009 (Core) K8S Version:Kubernetes v1.20.4 k8s dashboard ui安装完毕后&#xff0c;通过google浏览器登录返现https网页&#xff0c;发现非官方的https网页无法打开 网址&#xff1a;https://192.168.10.236:31001 2.原…

[java进阶]——异常详解,try catch捕获异常,抛出异常

&#x1f308;键盘敲烂&#xff0c;年薪30万&#x1f308; 目录 一、异常的体系结构 二、处理异常的本质 三、异常处理的三种方式 3.1虚拟机jvm处理(默认) 3.2 try catch捕获异常 3.3抛出异常 3.4finally关键字 四、自定义异常 五、总结 一、异常的体系结构 分析&#…

pensieve运行的经验

1运行run_videopy时出现如下问题&#xff1a; cmd: Union[List[str], str], ^ SyntaxError: invalid syntax原因是EasyProcess版本与python版本不对应&#xff0c;解决办法可见之前这篇博客&#xff1a;SyntaxError: invalid syntax。 2解决完上述问题后&#xff0c;输…

NSSCTF第8页(1)

[HGAME 2023 week1]Classic Childhood Game js代码审计&#xff0c;找关键语句&#xff0c;发现event.js里边东西是最多的 找到了通关语句 他下边应该是就关键代码了&#xff0c;有一串16进制代码 解出来是base64&#xff0c;接着解 两次base64 解码&#xff0c;就得到了flag…

Vector3(即是位置,也是方向)

在三维世界中&#xff0c;最重要的就是确定物体在三维世界中 的位置、大小和缩放等信息。在Unity中&#xff0c;Vector3结构体就是用来表示这些信息的&#xff0c;此外也用Vector2来表示二维世界中的信息。 Vector3结构体由x、y、z这3个数值组成&#xff0c;表示了一个向量&am…

Nautilus Chain 与 Coin98 生态达成合作,加速 Zebec 生态亚洲战略进

目前&#xff0c;行业内首个模块化 Layer3 架构公链 Nautilus Chain 已经上线主网&#xff0c;揭示了模块化区块链领域迎来了全新的进程。在主网上线后&#xff0c;Nautilus Chain 将扮演 Zebec 生态中最重要的底层设施角色&#xff0c;并将为 Zebec APP 以及 Zebec Payroll 规…

算法-动态规划-java

文章目录 动态规划动态规划的核心动态规划算法的两种形式首先使用递归的方法实现这个算法①自顶向下的备忘录法②自底向上的动态规划&#xff08;推荐使用&#xff09; 更好的理解动态规划经典例题&#xff1a;钢条分割首先使用递归的方法实现这个算法①自顶向下的备忘录法②自…

2023-10-16 LeetCode每日一题(只出现一次的数字 III)

2023-10-16每日一题 一、题目编号 260. 只出现一次的数字 III二、题目链接 点击跳转到题目位置 三、题目描述 给你一个整数数组 nums&#xff0c;其中恰好有两个元素只出现一次&#xff0c;其余所有元素均出现两次。 找出只出现一次的那两个元素。你可以按 任意顺序 返回答…

CSS中 通过自定义属性(变量)动态修改元素样式(以 el-input 为例)

传送门&#xff1a;CSS中 自定义属性&#xff08;变量&#xff09;详解 1. 需求及解决方案 需求&#xff1a;通常我们动态修改 div 元素的样式&#xff0c;使用 :style 和 :class 即可&#xff1b;但想要动态修改 如&#xff1a;Element-ui 中输入框&#xff08;input&#x…

【每日一题】统计无向图中无法互相到达点对数

文章目录 Tag题目来源题目解读解题思路方法一&#xff1a;并查集方法二&#xff1a;DFS乘法原理 写在最后 Tag 【DFS乘法原理】【并查集】【图】【数组】【2023-10-21】 题目来源 2316. 统计无向图中无法互相到达点对数 题目解读 节点之间的连接关系是通过数组给出的&#x…

10月9日 Jdbc(2)

PreparedStatement的使用和jdbcUtil工具类的封装 拼接带来的sql注入问题(拼接sql) Statement PreparedStatement的使用 package com.fs.db;import com.fs.util.JdbcUtil;import java.sql.*; import java.util.Date; import java.util.Scanner;/*** 模拟SQL攻击*/ public clas…

使用 dynamic-datasource 完成多数据源操作

本次操作是将达梦数据库的数据插入到MySQL数据库中。 准备工作 创建一个 Spring Boot 项目添加依赖配置数据源属性 POM文件 <dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter</art…

Python机器学习入门指南

前言 机器学习 作为人工智能领域的核心组成&#xff0c;是计算机程序学习数据经验以优化自身算法&#xff0c;并产生相应的“智能化的”建议与决策的过程。 一个经典的机器学习的定义是&#xff1a; A computer program is said to learn from experience E with respect to …

【软考】11.6 系统转换/系统维护/系统评价

《系统转换》 遗留系统 &#xff08;改造&#xff09;高水平高价值&#xff08;集成&#xff09;高水平低价值&#xff08;继承&#xff09;低水平高价值&#xff08;淘汰&#xff09;低水平低价值 系统转换 《系统维护》 耗时长、成本高 提高可维护性是在软件设计和开发阶…

搞个微信小程序001

一&#xff0c;申请账号 开始 | 微信开放文档 二&#xff0c;安装开发者工具 开始 | 微信开放文档 我这里搞了个稳定版的。 三&#xff0c;第一个小程序 1&#xff0c;打开工具&#xff0c;扫码登录 2&#xff0c;新建以小程序 选择&#xff0c;不使用云服务&#xff0c…

SpringMVC的工作流程

1、SpringMVC的定义 Spring MVC是基于Java的开源Web框架&#xff0c;它是Spring框架的一部分&#xff0c;用于构建MVC&#xff08;Model-View-Controller&#xff09;模式的Web应用程序。它提供了一种灵活且强大的方式来开发Web应用程序&#xff0c;并将应用程序的不同层进行解…

C#接口和继承的区别、联系与使用场景

在C#编程语言中&#xff0c;接口和继承是两个核心的概念。本文将详细介绍接口和继承之间的区别与联系&#xff0c;并探讨它们在实际编程中的使用场景。通过代码示例和详细说明&#xff0c;读者将能够深入理解这两个概念的功能和用法。 目录 引言1. 区别与联系1.1 区别1.2 联系 …

curl命令服务器上执行http请求

1. 现在本地使用postman生成curl命令 注意: 将ip改成127.0.0.1,端口是实际服务运行的端口 curl --location --request POST http://127.0.0.1:63040/content/course/list?pageNo1&pageSize2 \ --header Content-Type: application/json \ --data-raw {"courseName&q…

FreeRTOS介绍 和 将FreeRTOS移植到STM32F103C8T6

一、FreeRTOS 介绍 什么是 FreeRTOS &#xff1f; Free即免费的&#xff0c;RTOS的全称是Real time operating system&#xff0c;中文就是实时操作系统。 注意&#xff1a;RTOS不是指某一个确定的系统&#xff0c;而是指一类操作系统。比如&#xff1a;uc/OS&#xff0c;Fr…

基于SSM的在线房屋租赁和电子签约系统的设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;Vue 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是 目录…