【js】原生input框及下拉框数据联动( 列如: 输入框输入 3,下拉框里的选项值则为:1,2,3)

news2024/9/20 8:09:15

需求

输入框输入 数字 下拉框要显示对应的数字
列如: 输入框输入 13 下拉框里的选项值则为:1,2,3,4,5,6,7,8,9,10,11,12,13

列如: 输入框输入 3 下拉框里的选项值则为:1,2,3,
在这里插入图片描述
在这里插入图片描述

代码:

<select id="partition" >
    </select>
    <span>隔口数量:</span>
    <input id="partitions" type="text"
     onblur="getBlur()"  
     style="background-color: #eaeaea" 
   />
function getBlur() {
        document.getElementById('partition').options.length = 0;//清空select里上一次的值
        var partitions = document.getElementById("partitions").value;
        var partition = document.getElementById("partition");
        for (let i = 1; i <= partitions; i++) {
            var option = document.createElement("option");
            option.text = i;
            option.value = i;
            partition.add(option);
        }
    }

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

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

相关文章

【数据结构 -- C语言】 双向带头循环链表的实现

目录 1、双向带头循环链表的介绍 2、双向带头循环链表的接口 3、接口实现 3.1 开辟结点 3.2 创建返回链表的头结点 3.3 判断链表是否为空 3.4 打印 3.5 双向链表查找 3.6 双向链表在pos的前面进行插入 3.6.1 头插 3.6.2 尾插 3.6.3 更新头插、尾插写法 3.7 双向链…

springBoot中使用redis实现分布式锁实例demo

首先 RedisLockUtils工具类 package com.example.demo.utils;import org.junit.platform.commons.util.StringUtils; import org.springframework.context.annotation.Bean; import org.springframework.data.redis.core.RedisTemplate; import org.springframework.data.red…

【最短路径 本质模板】【最短路径问题 本质 Dijkstra 和 spfa】收藏本篇,遇到最短路问题,来看看模板和思路

也就是走过的节点&#xff0c;还可以再走 但是dij走过的不能再走了 这是本章的精髓&#xff0c;大家往下看 欢迎观看我的博客&#xff0c;如有问题交流&#xff0c;欢迎评论区留言&#xff0c;一定尽快回复&#xff01;&#xff08;大家可以去看我的专栏&#xff0c;是所有文章…

关于deeplabv3的输出维度与类别预测的对应关系

这里用到的代码是&#xff1a;DeepLabV3源码讲解(Pytorch)_哔哩哔哩_bilibili 背景说明&#xff1a;自己做了一个数据集&#xff0c;已经训练完毕&#xff0c;一共7类零食&#xff0c;加背景算8类。 前面的代码省略了model.eval() # 进入验证模式with torch.no_grad():# init …

WordPress 技巧:WordPress设置媒体文件的默认链接本身方法

当我们在 WordPress 后台上传文件&#xff0c;并添加到内容中得时候&#xff0c;默认媒体文件是链接到文件本身&#xff0c;这个是很烦人的&#xff0c;有时候我们只是想在文章内容中插入一张图片&#xff0c;而不想给这张图片加上任何链接&#xff0c;我们怎么做呢&#xff1f…

动态主机配置协议 DHCP

文章目录 1 概述2 DHCP2.1 工作原理2.2 报文类型 3 扩展3.1 网工软考真题 1 概述 #mermaid-svg-ZESmHWHRC6kYroqm {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-ZESmHWHRC6kYroqm .error-icon{fill:#552222;}#merm…

Java EE 进阶--多线程(二)

目录 一、JUC(java.util.concurrent) 的常见类 1.1 信号量 Semaphore 1.2 CountDownLatch 1.3 CyclicBarrier -循环栅栏 二、线程安全的集合类 2.1 多线程环境使用 ArrayList 2.2 多线程环境使用队列 2.3 多线程环境使用哈希表 三、死锁 3.1 死锁是什么 3.2 如何避免死…

Linux文本三剑客之sed

Linux文本三剑客之sed 一、sed简介二、工作流程三、sed的常见用法1、常见的sed命令选项2、常见的操作3、基本用法实例3.1 sed查询3.2 sed删除3.3 sed替换sed ‘s/旧字符/新字符/’ &#xff1a;替换每行匹配到的第一个旧字符3.4 sed插入 一、sed简介 sed&#xff08;Stream ED…

Chrome浏览器竟然也可以用ChatGPT了!

最近这段时间想必 和我一样&#xff0c;都被chatGPT刷屏了。 在看到网上给出的一系列chatGPT回答问题的例子和自己亲自体验之后&#xff0c;的确发现它效果非常令人惊艳。 chatGPT的火热程度在开源社区也有很明显的体现&#xff0c;刚推出不久&#xff0c;围绕chatGPT的开源项…

Redis:发布订阅

发布订阅到底是什么功能&#xff1f; 在CSDN这个app中有一个关注的功能&#xff0c;其实这个功能与redis的发布订阅有着异曲同工之处 订阅就相当于关注&#xff0c;关注之后&#xff0c;就相当于加入博主的专属的频道里&#xff0c;只要博主在这个频道里发布了什么信息&#…

VMware虚拟机安装OpenEuler欧拉系统

原文地址&#xff1a;https://program-park.top/2023/05/17/linux_7/ OpenEuler 镜像下载&#xff1a;https://www.openeuler.org/zh/download/   我这里以x86_64架构为示例&#xff0c;使用的23.03版本&#xff1a; 准备好镜像文件&#xff1a; 创建新虚拟机&#xff1a; 选…

HBuilder开发uniapp添加android的模拟器的方法

我们知道使用uniapp开发多端app非常方便&#xff0c;开发过程中的模拟器也可以提高我们测试代码的效率。但我们按uniapp官网的方法&#xff0c;上google的官网下载模拟器&#xff0c;往往非常不方便。 下面我们来看一下使用其他模拟器的方法。 我们知道android开发中&#xf…

Java生成jni.h头文件,java调用C方法 图文详解

环境搭建 1. android studio2021.2.1 2. JDK版本1.8 一、创建一个android项目 File ——> New ——> New Project ——> Empty Activity 创建后如下图所示 二、创建一个java调用C的类 2.1 java类命名为JNITest&#xff0c;创建一个两数之和的方法sums 大概需求…

5.Golang、Java面试题—Spring Cloud、Docker、kubernets(k8s)

本文目录如下&#xff1a; Golang、Java面试题二十、Spring Cloud什么是微服务架构&#xff1f;服务拆分 有哪些注意事项&#xff1f;什么是分布式集群?分布式的 CAP 原则&#xff1f;组件 - Spring Cloud 哪几个组件比较重要&#xff1f;组件 - 为什么要使用这些组件&#xf…

低代码开发ERP:从行业应用到自我价值的思考

随着数字化时代的到来&#xff0c;企业管理软件变得越来越重要。而最为重要的企业管理软件之一便是ERP&#xff08;Enterprise Resource Planning&#xff09;&#xff0c;也就是企业资源计划&#xff0c;它集成了企业内部各个部门的信息&#xff0c;帮助企业进行全面的资源管理…

几个优秀的Wordpress主题汇总(精选免费WP主题)

DNSHH主题 单栏的 WordPress 博客主题&#xff0c;其模板风格&#xff0c;从DNSHH上移植到Typecho&#xff0c;再从Typecho移植到了 WordPress 上&#xff0c;相信这款 WordPress 博客主题这么受欢迎是因为被其简单大气的风格所吸引人吧&#xff01; frontopen 扁平化页面风格…

Java进程(基础)

基本概念 1、进程&#xff1a;程序的执行过程 2、线程&#xff1a;一个进程可以有单个线程也就是我们说的单线程&#xff0c;还可以有多个线程也就是我们说的多线程&#xff0c; 线程 1、当一个类继承了Thread类就可以当成一个线程用 2、我们会重写run方法写上我们自己的业务…

plsql 安装和连接配置

首先下载plsql 安装&#xff0c; 然后 下载oracle 客户端 配置连接(如果安装了oracle 数据库&#xff0c;可以直接配置数据库则可跳过此步骤),下载后解压(解压密码为1) 然后找到 \instantclient_supper\network\admin 目录创建 tnsnames.ora 文件配置数据库连接 例如配置本地…

pynvme操作流程

步骤一&#xff1a;检查本地windows是否安装ssh 检查方式&#xff1a;windows本地打开windows powershell&#xff0c;输入ssh&#xff0c;若打印usage &#xff1a;ssh等一些信息&#xff0c;则已安装ssh&#xff0c;否则需要安装&#xff0c;安装方式如下&#xff0c;一般系…

Java 基础核心总结

目录 前言 介绍 1、基本语法 2、面向对象编程 3、异常处理 4、集合框架 5、IO 流 6、多线程 专栏地址 前言 Java 是一种广泛使用的程序设计语言&#xff0c;具有跨平台、面向对象、安全性高、灵活性强等特点&#xff0c;广泛应用于企业级应用程序和移动应用程序等领域…