`
longying2008
  • 浏览: 300358 次
社区版块
存档分类
最新评论

向<select>元素中动态添加option

selectoption动态添加 
阅读更多

向<select>元素中动态添加option JavaScript代码：

/**
 * select元素动态添加option
 * 
 * @param selectEleId select元素id
 * @param width 要添加的option的value属性值
 * @param height 要添加的option的innerHTML
 * @param selected 是否选中
 */
function addOption(selectEleId, optionValue, optionInnerHTML, selected) {
  var selectEle = document.getElementById(selectEleId);
  var optionObj = document.createElement("option");
  optionObj.value = optionValue;
  optionObj.innerHTML = optionInnerHTML;
  optionObj.selected = selected;
  selectEle.appendChild(optionObj);
}

 

示例完整代码：

<!doctype html>
<html>
<head>
<meta charset="gbk">
<title>向select元素中动态添加option</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function() {
  var now = new Date();
  var year = now.getFullYear();
  addOption("years", year, year, true);
  addOption("years", year + 1, year + 1, false);
  
  var innerHTMLs = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"];
  var month = now.getMonth();
  for(var i = month; i < 12; i++) {
    if(i == month) {
	  addOption("months", i, innerHTMLs[i], true);
	} else {
	  addOption("months", i, innerHTMLs[i], false);
	}
  }
});
/**
 * select元素动态添加option
 * 
 * @param selectEleId select元素id
 * @param width 要添加的option的value属性值
 * @param height 要添加的option的innerHTML
 * @param selected 是否选中
 */
function addOption(selectEleId, optionValue, optionInnerHTML, selected) {
  var selectEle = document.getElementById(selectEleId);
  var optionObj = document.createElement("option");
  optionObj.value = optionValue;
  optionObj.innerHTML = optionInnerHTML;
  optionObj.selected = selected;
  selectEle.appendChild(optionObj);
}
</script>
</head>
<body>
年份：<select id="years"></select>
<br/>
月份：<select id="months"></select>
</body>
</html>

 

1
顶
1
踩
分享到：
| 【MyBatis入门】—— MyBatis日志
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    向元素中动态添加option

    NULL 博文链接：https://longying2008.iteye.com/blog/2203068

    HTML5&CSS3网页制作：select元素.pptx

    每对&lt;select&gt;和&lt;/select&gt;中至少应包含一对&lt;option&gt;和&lt;/option&gt;。 说明 标记名 常用属性 描述 &lt;select&gt; size 指定下拉菜单的可见选项数（取值为正整数）。 multiple 定义multiple="multiple"时，下拉菜单将具有多项...

    JS动态添加Select中的Option元素值

    两个下拉列表，用JS动态添加Select中的Option元素值

    Web前端高级作业一.txt

    &lt;select&gt;&lt;/select&gt;标签是选项标签，里面加入option可以作为选项 2.1.3框架&lt;frame&gt;和框架集&lt;frameset&gt;` 二.css 1.这个用来设置标签样式有好处 采用外部样式设置页面一来可以减少代码的瘫肿；二来可以时开发页面...

    jQuery完全实例.rar

    &lt;p&gt;one&lt;/p&gt; &lt;div&gt;&lt;p&gt;two&lt;/p&gt;&lt;/div&gt; &lt;p&gt;three&lt;/p&gt; jQuery 代码: $("div &gt; p"); 结果: [ &lt;p&gt;two&lt;/p&gt; ] -------------------------------------------------------------------------------- 在文档的第一个表单...

    H5+CSS3.zip

    表单标签：使用&lt;form&gt;创建表单，文本输入框，密码输入框，数字输入框，网址输入框，邮箱输入框，&lt;textarea&gt;创建文本域，单选框，复选框，使用select、option创建下拉菜单，提交按钮，重置按钮； CSS3部分具体内同...

    JQuery动态添加Select的Option元素实现方法

    如下所示： var selector=$('&lt;select&gt;&lt;/select&gt;...以上这篇JQuery动态添加Select的Option元素实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。

    ASP.Net.Web程序设计

    C)&lt;option&gt; D)&lt;select name="NAME"&gt;&lt;/select&gt; 1、HTML的全称是什么？HTML语言是什么？ 答：HTML（HyperText Markup Language）的中文名称为“超文本描述语言”，是一种专门用来设计网页的计算机语言，用HTML编写的超...

    html入门到放弃笔记

    标记在使用时，用尖括号 "&lt;&gt;",标记的分类 1、封闭类型的标记 也称为 "双标记" , 必须成对出现 语法：&lt;标记&gt;内容&lt;/标记&gt; Demo ： 1、创建 p 标记 --&lt;p&gt;...&lt;/p&gt; 2、创建 div 标记 -- &lt;div&gt;&lt;/div&gt; 3、创建 ...

    Responsive-Menu:转动任何或者变成一个适用于手机和较小的浏览器尺寸

    由于无法选择&lt;optgroup&gt; ，因此在组的顶部添加&lt;li&gt;值的“虚拟” &lt;option&gt; 。 此选项设置“虚拟” &lt;option&gt; ['string']的文本 嵌套[true] 这将打开和关闭&lt;optgroup&gt;的[true / false] prependTo ['body'] 设置要放...

    关于解决ElementUi中select框在页面滚动时el-option超出元素区域的问题+ cascader滚动超出问题

    关于解决ElementUi中select框在页面滚动时el-option超出元素区域的问题+ cascader滚动超出问题

    js使用小技巧

    &lt;input type=text name=text1 value="123" onfocus="this.select()"&gt; ENTER键可以让光标移到下一个输入框 &lt;input onkeydown="if(event.keyCode==13)event.keyCode=9"&gt; 文本框的默认值 &lt;input type=text value=...

    改进版：在select中添加、修改、删除option元素

    今天休完年假从家回来后，看到小林在QQ发的“监控管理示范代码”，核心原理用的是select元素的 add() 方法： 代码如下: function watch_ini(){ // 初始 for(var i=0; i&lt;arguments.length; i++){ var ...

    vue中动态绑定表单元素的属性方法

    在vue中有时候可能想像使用jq一样给某个元素添加属性，如 $('#select1').attr('disabled','disabled') 这种方法也能实现，但是在vue中能用vue的方法还是尽量不要使用jq 使用vue的方法来添加属性可以这样： &lt;...

    关于jquery中动态增加select,事件无效的快速解决方法

    近来做项目，用的jquery1.6.2库，当动态增加div 及select时，事件却不起作用。 查了一些资料，发现bind事件：向匹配元素附加一个或更多事件处理器。而live事件：为当前或未来的匹配元素添加一个或多个事件处理器。 ...

    Element-ui中元素滚动时el-option超出元素区域的问题

    复现场景, 看图 分析原因 为简单起见, 把选项区域描述为popperEl popperEl的z-index 比较大, 会覆盖在其他元素上面 ...我最初想到的解决方案是通过css解决，通过popper-class属性给Select下拉框添加类名,然后用

    ASP083客户关系管理\客户关系管理

    if request("select2")&lt;&gt;"全部" then sql=sql&" and dbo.tb_Linkman.SetName='"&request("SetName")&"'" end if sql="SELECT dbo.tb_Linkman.LinkmanName, dbo.tb_Client.ClientName,dbo.tb_Linkman.LinkmanDept,...

    JQuery给元素添加/删除节点比如select

    jQuery获取Select选择的Text和Value: 代码如下: var checkText=jQuery(“#select_id”).find(“option:selected”).text(); //获取Select选择的Text var checkValue=jQuery(“#select_id”).val(); //获取Select选择...

    JavaScript笔记

    4.变量：js中的变量不需要提前指定类型，由赋值时动态决定 所有的变量都用var声明 5.数据类型： |--String(字符串类型) |--Number(数字类型) |--Boolean(布尔类型)0、-0、null、""、false/undefined或NaN,则该...

    javascript jquery对form元素的常见操作详解

    添加option $("&lt;option value='111'&gt;UPS Ground&lt;/option&gt;").appendTo($("#ID")); 取得下拉选单的选取值 //取下拉選中的文本 $('#testSelect option:selected').text(); $("#testSelect").find('option:selected')....

Magicbox
Global site tag (gtag.js) - Google Analytics