Js实现通过下拉框选择关键字(带图)

<!DOCTYPE html>
<html>
<head><title>下拉框搜索图片</title><script>// 图片数据var images = {"日出": "1.jpg","小猫": "2.jpg","萝莉": "3.png"};// 当下拉框的选项改变时触发function searchImage() {// 获取下拉框的值var selectedOption = document.getElementById("search").value;// 获取显示图片的元素var imageElement = document.getElementById("image");// 检查选项是否在图片数据中if (selectedOption in images) {// 设置图片的src属性为选项对应的图片路径imageElement.src = images[selectedOption];} else {// 如果选项不存在对应的图片,则显示默认图片或者清空图片imageElement.src = "1.jpg";// 或者可以使用下面的代码清空图片// imageElement.src = "";}}</script>
</head>
<body><h1>下拉框搜索图片</h1><select id="search" onchange="searchImage()"><option value="日出">日出</option><option value="小猫">小猫</option><option value="萝莉">萝莉</option></select><br><img id="image" src="1.jpg" alt="图片">
</body>
</html>

显示效果:

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++--机器人的运动范围

目录 1. 题目 2. 思路 3. C代码测试 4. 测试结果 1. 题目 地上有一个m行和n列的方格。一个机器人从坐标0,0的格子开始移动&#xff0c;每一次只能向左&#xff0c;右&#xff0c;上&#xff0c;下四个方向移动一格&#xff0c;但是不能进入行坐标和列坐标的数位之和大于k的格…

二百二十六、Linux——shell脚本查看今天日期、昨天日期、30天前日期、1月前日期

一、目的 由于磁盘资源有限&#xff0c;因为对原始数据的保存有事件限制&#xff0c;因为对于超过一定期限的数据文件则需要删除&#xff0c;要实现定期删除则第一步就是查看日期时间 二、在Linux中创建shell脚本 #! /bin/bash source /etc/profile nowdatedate --date0 da…

Reqable爬虫抓包工具(国产网络调试工具)

官网界面截图&#xff1a; 官网地址&#xff1a;https://reqable.com/zh-CN/windows/ 历史由来&#xff1a; Reqable的前身是HttpCanary&#xff08;一款Android平台应用程序&#xff09;&#xff0c;但是国内开发者推翻了所有的技术栈&#xff0c;并用C和Flutter重写&#x…

抖店怎么选品?所谓的品感,无非就是快速发现产品的卖点和属性

我是王路飞。 今天想跟你们聊聊抖店的核心-选品。 其实这也是整个电商行业的核心&#xff0c;你所有的运营手段都是围绕产品去展开的&#xff0c;产品不行&#xff0c;一切都白搭。 至于【品感】这个词&#xff0c;相信你们也不陌生&#xff0c;也是很多有经验的老玩家经常给…

《低代码平台开发实践:基于React》读书心得与实战体验

低代码平台开发实践标题 &#x1f3ac; 江城开朗的豌豆&#xff1a;个人主页 &#x1f525; 个人专栏 :《 VUE 》 《 javaScript 》 &#x1f4dd; 个人网站 :《 江城开朗的豌豆&#x1fadb; 》 ⛺️ 生活的理想&#xff0c;就是为了理想的生活 ! 目录 &#x1f4d8; 一、引…

QT对象树 | 内存泄漏

使用 Qt 框架构建 GUI 界面的程序 //widget.cpp #include "widget.h" #include "ui_widget.h" #include <QLabel>Widget::Widget(QWidget *parent) //这里的parent的意思是父级指针: QWidget(parent) //调用父类的构造函数, ui(new Ui::Widget) …

智慧城市中的数字孪生:数字孪生技术助力智慧城市提高公共服务水平

目录 一、引言 二、数字孪生技术概述 三、数字孪生技术在智慧城市中的应用 1、智慧交通管理 2、智慧能源管理 3、智慧环保管理 4、智慧公共安全 四、数字孪生技术助力智慧城市提高公共服务水平的价值 五、挑战与前景 六、结论 一、引言 随着信息技术的飞速发展&…

成功交付 | 精益DevOps

⭐简单说两句⭐ 作者&#xff1a;后端小知识&#xff0c;CSDN后端领域新星创作者|阿里云专家博主 CSDN个人主页&#xff1a;后端小知识 &#x1f50e;GZH&#xff1a;后端小知识 &#x1f389;欢迎关注&#x1f50e;点赞&#x1f44d;收藏⭐️留言&#x1f4dd; 按需交付服务从…

python网络爬虫教程笔记(1)

系列文章目录 文章目录 系列文章目录前言一、爬虫入门1.爬虫是什么&#xff1f;2.爬虫工作原理3.爬虫基本原理4.工作流程5.HTTP请求6.HTTP响应7.HTTP原理&#xff1a;证书传递、验证和数据加密、解密过程解析8.Urllib.request库的使用9.TCP3次握手&#xff0c;4次挥手过程 总结…

Express学习(一)

Express Express简介 什么是Express 官方给出的概念&#xff1a;Express是基于Node.js平台&#xff0c;快速、开放、极简的web开发框架。 通俗的理解&#xff1a;Express的作用和Node.js内置的http模块类似&#xff0c;是专门用来创建Web服务器的。进一步理解Express 不使用E…

ssm+springboot音乐播放器网站mybatis+jsp

测试流程 &#xff08;1&#xff09; 登录系统、填写用户名、密码选择角色&#xff0c;主要内容&#xff1a;进行权限控制。 &#xff08;2&#xff09; 用户查看音乐信息、音乐资讯功能&#xff0c;主要是测试系统实用性、方便性。 &#xff08;3&#xff09; 信息修…

云桥通+跨国游戏:SDWAN组网解析跨国游戏企业的成功案例

运气通曾服务过一家国际知名的游戏开发公司C&#xff0c;C公司的游戏广受年轻人欢迎&#xff0c;所以&#xff0c;他C公司也顺理成章地拥有全国玩家基础。由于游戏的在线特性和全球用户分布&#xff0c;C公司面临着跨国游戏服务器之间的苦恼——稳定问题和网络连接问题。他们希…