JS中使用new Option()实现时间联动效果

2024-07-28 17:24:14

1、基础准备：

　　先来了解下，如何运用js实现select动态添加option。

//1.动态创建select
function createSelect(){
  var mySelect = document.createElement("select");
  mySelect.id = "mySelect";
  document.body.appendChild(mySelect);
}
//2.添加选项option
function addOption(){
  //根据id查找对象，
  var obj=document.getElementById('mySelect');
  //添加一个选项
  obj.add(new Option("文本","值"));  //方法一：
  obj.options.add(new Option("text","value")); //方法二：
  for(var i=0;i<10;i++){
    obj.options[i]=new Option("新文本","新值");  //方法三：
  }
}
//3.删除所有选项option
function removeAll(){
  var obj=document.getElementById('mySelect');
  obj.options.length=0;
}
//4.删除一个选项option
function removeOne(){
  var obj=document.getElementById('mySelect');
  var index=obj.selectedIndex;  //index,要删除选项的序号
  obj.options.remove(index);
}
//5.获得选项option的值
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex;   //序号，取当前选中选项的序号
var val = obj.options[index].value;
//6.获得选项option的文本
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex;
var val = obj.options[index].text;
//7.修改选项option
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex;
var val = obj.options[index]=new Option("新文本","新值");
//8.删除select
function removeSelect(){
  var mySelect = document.getElementById("mySelect");
  mySelect.parentNode.removeChild(mySelect);
}

2、时间联动实战

　　时间联动的要点就是天数随月份变化，考虑闰年，口诀：四年一闰，百年不闰，四百年再闰。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>日期和年份月份联动demo</title>
</head>
<body>
  <select id="year">
    <option value="">请选择年份</option>
  </select>
  <select id="month">
    <option value="">请选择月份</option>
  </select>
  <select id="day">
    <option value="">请选择日期</option>
  </select>
  <script>
    var year = document.getElementById("year");
    var month = document.getElementById("month");
    var day = document.getElementById("day");
    var y = new Date().getFullYear();
    //前后均有
    for (i = (y - 30); i < (y + 30); i++) {
      year.options.add(new Option(i + "年", i));
      //格式不要写错，不要写成add(new Option(i + "年"), i)。
    }
    //只写前或者后
    // for(var i=y;i>1977;i--){
    //   year.options[y+1-i]=new Option(i+"年",i);//索引是options[],增加是new option(text,value)
    // }
    for (i = 1; i < 13; i++) {
      month.options.add(new Option(i + "月", i));
    }
    var d = function () {
      day.length = 1; //初始化
      if (year.value == " " || month.value == " ") {
        return;
      } else {
        var Days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
        if ((year.value % 4 == 0 && year.value % 100 != 0) || year.value % 400 == 0) {
          Days[1]++; //判断为闰年，二月天数加一
        }
        for (i = 1; i <= Days[month.value - 1]; i++) {
          day.options.add(new Option((i + "日"), i));
        }
      }
    }
    //刷新日期天数
    year.onchange = function () {
      d();
    }
    month.onchange = function () {
      d();
    }
  </script>
</body>
</html>

总结

以上所述是小编给大家介绍的JS中使用new Option()实现时间联动效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

详解Javascript中new()到底做了些什么？

前言和其他高级语言一样 javascript 中也有 new 运算符,我们知道 new 运算符是用来实例化一个类,从而在内存中分配一个实例对象. 但在 javascript 中,万物皆对象,为什么还要通过 new 来产生对象? 本文将带你一起来探索 javascript 中 new 的奥秘... 要创建 Person 的新实例,必须使用 new 操作符. 以这种方式调用构造函数实际上会经历以下 4个步骤: (1) 创建一个新对象: (2) 将构造函数的作用域赋给新对象(因此 this 就指向了
JavaScript中new运算符的实现过程解析

这篇文章主要介绍了JavaScript中new运算符的实现过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下废话不多说直接进入正题,首先我们需要先知道new运算符到底做了哪些事情,再来模拟它实现这一功能. 1. 建立一个空的Object对象: 2. 把这个空对象用__proto__链接到原型 3. 用apply绑定对象的this指向 4. 返回新的对象知道了new的具体过程之后,我们就可以来试一下用代码实现这一过程. // 传参 New
JavaScript new对象的四个过程实例浅析

本文实例讲述了JavaScript new对象的四个过程.分享给大家供大家参考,具体如下: new对象: function Person(name, age) { this.name = name; this.age = age; } var person = new Person("Alice", 23); new一个对象的四个过程: 1.创建一个空对象 var obj = new Object(); 2.让Person中的this指向obj,并执行Person的函数体 var re
js中new一个对象的过程

使用new关键字调用函数(new ClassA(-))的具体步骤: 1. 创建空对象{} 2. 使用新对象,调用函数,函数中的this被指向新实例对象: {}.构造函数(); 3. 设置新对象的constructor属性为构造函数的名称,设置新对象的__proto__属性指向构造函数的prototype对象 4. 将初始化完毕的新对象地址,保存到等号左边的变量中注意:若构造函数中没有返回值或返回值是基本类型(Number.String.Boolean)的值,
javascript中new Array()和var arr=[]用法区别

大家在学习javascript中对于数组函数new Array()和var arr=[]很多朋友不知道如何区别,也不知道用法,下面看看我们总结的. var arr=[] 这是一种字面量定义数组的方法 var arr=new Array() 这是调用数组构造函数生成的数组上面的2种定义数组的方法到底一样不一样目前我们大致的认同是下面这样的用new 关键字去内存开辟一个存储地址比较耗资源,耗内存. 而字面量方式直接在内存开辟一个存储字段相对简单,不耗资源. 我们首先不去否定上面的结论对不对.
JS中‘hello’与new String(‘hello’)引出的问题详解

定义一个字符串在工作中我们大概有3种方法去定义一个字符串: 1. var str = 'hello'; 2. var str1 = String('hello'); 3. var str2 = new String('hello'); (下文直接会带以上三个变量....) 这三种方法定义出来的 'hello',都有自己的属性例如lengh,有自己的方法例如: indexOf(),在日常工作定义中也没有感觉到任何的不同. 那是否深入过, 1.这三种方式定义出来的'hello',是否是一样的呢
原生JS封装_new函数实现new关键字的功能

一.前言众所周知:没有对象怎么办?那就new一个! 那么在JS中,当我们new一个对象的时候,这个new关键字内部都干了什么呢? 现在我们就来剖析一下原生JS中new关键字内部的工作原理. 二.原始的new 首先,我们先new一个对象看看: //创建Person构造函数,参数为name,age function Person(name,age){ this.name = name; this.age = age; } //实例化对象小明 xm = new Person('xiaoming',1
用Newtonsoft将json串转为对象的方法(详解)

首先,将json串转为一个JObject对象: JObject jo = (JObject)JsonConvert.DeserializeObject(CurrentSelectedItemReq); 这个JObject是一个"值对"类型,比如说我们的json串是这样: { "rows":[ [ {"NumIid":"001"}, {"PicUrl":"xxx.png"}, {"
JS中使用new Option()实现时间联动效果

1.基础准备: 先来了解下,如何运用js实现select动态添加option. //1.动态创建select function createSelect(){ var mySelect = document.createElement("select"); mySelect.id = "mySelect"; document.body.appendChild(mySelect); } //2.添加选项option function addOption(){ //根据
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)

先看效果图,这是弹窗效果,要求就是弹窗出现和消失时候不是很突兀,要有过渡效果. 首先看弹窗出现的实现思路,先加一个beforeActive类,再加一个active类.我们看审查元素,一开始display:none: 在beforeActive中display:block:只是background: transparent;然后在一定时间后再加上active类.问题就来了,在打开弹窗代码中,如下图,settimeout第二个参数小于60ms效果就会不稳定,有时候有过渡效果,有时候没有过渡效果. /
js实现简单的省市县三级联动效果实例

本文实例讲述了js实现简单的省市县三级联动效果.分享给大家供大家参考,具体如下: js代码部分 //省市县数据格式 var province_city_county_data=[ { province:"四川", city:[ { cityName:"成都", county:["成都市","崇州市","金堂县"] }, { cityName:"南充", county:["仪陇县
js实现的下拉框二级联动效果

本文实例讲述了js实现的下拉框二级联动效果.分享给大家供大家参考,具体如下: <script language="JavaScript" type="text/javascript"> <!-- /* * 说明:将指定下拉列表的选项值清空 * 转自:Gdong Elvis ( http://www.gdcool.net ) * * @param {String || Object]} selectObj 目标下拉选框的名称或对象,必须 */ fun
js中class的点击事件没有效果的解决方法

如下所示: $(".xx").clcik(function(){····}); 本来不用js生成类,是有点击效果的一但js里写,就没有点击效果了,如下: 做如下修改即可,监听document 以上就是小编为大家带来的js中class的点击事件没有效果的解决方法全部内容了,希望大家多多支持我们~
js实现页面多个日期时间倒计时效果

js的日期倒计时在日常项目中还是比较常用的,活动.拼团功能最为常见,先分析最要是处理好日期函数,然后一个页面上有多个倒计时情况下的方法: 来,先看下拼多多的拼单倒计时的效果: 那么,先上个代码吧: 案例效果: <style> .mytime{ line-height: 40px; width: 300px; margin: 0 auto;} </style> <div class="mytime jsTime" data-time="2019
js省市县三级联动效果实例

本文实例讲述了js实现简单的省市县三级联动效果.分享给大家供大家参考,具体如下: 效果图: 实现代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>城市三级联动</title> <style type="text/css"> *{ padd
JS实现的简单下拉框联动功能示例

本文实例讲述了JS实现的简单下拉框联动功能.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head
angularjs实现时间轴效果的示例代码

一引入包引入angular-timeline包. 下载地址:angular-timeline.zip 在index.html中引入 <link href="lib/angular-timeline/dist/angular-timeline.css" rel="external nofollow" rel="stylesheet"> <script src="lib/angular-timeline/dist/an
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例

Angularjs内置的过滤器(filter)为我们的数据信息格式化提供了比较强大的功能,比如:格式化时间,日期.格式化数字精度.语言本地化.格式化货币等等.但这些过滤器一般都是在VIEW中使用的,比如格式化时间/日期的VIEW视图代码: <div ng-app> <p> <label>Select a date</label> <input type="date" id="date" ng-model=&quo

JS中使用new Option()实现时间联动效果

相关推荐

随机推荐