JavaScript实现select添加option

JavaScript为select添加option

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试文件</title>
<script>
window.onload = function(){
  //创建select控件
  var _select = document.createElement("SELECT");

  //添加选项
  for(var i=1; i<=10; i++){
    var _option = new Option(i,i);
    _select.options.add(_option);
  }

  //选中值发生改变时的处理函数
  _select.onchange = function(){
    alert(_select.value); //取select控件被选中的值
  }

  document.body.appendChild(_select);
}
</script>
</head>

<body>
</body>
</html>

以上所述就是本文的全部内容了，希望大家能够喜欢。

赞 (0)

相关推荐

  • js添加select下默认的option的value和text的方法

    <pre name="code" class="java"> jsp 中的下拉框标签: <s:select name="sjx" id="sjx" list="sjxList" listKey="BM" listValue="MC" size="20" cssStyle="width:100%;height:70px;

  • JS & JQuery 动态添加 select option

    今天有朋友问我一个关于在<select>里动态添加option问题,一开始以为是JS那里动态添加,所以用了JS动态添加option的方法,但你那里是用JQuery的,所以才会一直出错,下面记下在JS和JQuery里添加option的区别. JS: var selid = document.getElementById("sltid"); for(var i=0; i<10;i++){ //循环添加多个值 sid.option[i] = new Option(i,i);

  • JS 通过系统时间限定动态添加 select option的实例代码

    JS 通过系统时间限定动态添加 select option的实例代码

    虽然是个简单的效果,还是需要积累一下,记录一下: 源代码如下所示: <select id="myselect1"> <option value="">- -</option> <option value="2015级">2015级</option> <option value="2014级">2014级</option> <option

  • JS实现Select的option上下移动的方法

    本文实例讲述了JS实现Select的option上下移动的方法.分享给大家供大家参考,具体如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript"> function UpOrDown(direct, selectId) {//direct : 1:Up, -1:

  • jquery根据一个值来选中select下的option实例代码

    jquery怎么根据一个值来选中select下的option <script type="text/javascript"> $(document).ready(function(){ var str=""; str = '${conclusionTypeName}'; $("#firstName option").each(function(){ alert($(this).text()); if($(this).text() ==

  • js给selected添加options的方法

    本文实例讲述了js给selected添加options的方法.分享给大家供大家参考.具体实现方法如下: <select id="Mmonth"> <option>1</option> </select> <input type="button" onclick="a()" value="添加"/> <script> function a(){ docume

  • JS更改select内option属性的方法

    本文实例讲述了JS更改select内option属性的方法.分享给大家供大家参考.具体如下: 帮一位友人解决了一个小问题,需求是更改选中选项卡内显示的文本值,新值存放在某个文本框内 初始窗口: <html> <head> <title>原窗口</title> <script> var parentValue=""; //全局变量,用于保存点击详情时select中指定opeion的值 function detail() { va

  • JavaScript操作select元素和option的实例代码

    废话不多说了,直接给大家贴代码,具体代码如下所示: <!DOCTYPE html PUBLIC "-//WC//DTD XHTML . Transitional//EN" "http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd"> <html xmlns="http://www.w.org//xhtml"> <head> <title></t

  • JavaScript实现select添加option

    JavaScript为select添加option <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试文件</title> <script> window.onload = function(){ //创建select控件 var _select = document.createElement("SELECT"

  • layui select动态添加option的实例

    html <form class="layui-form" action=""> <div class="layui-form-item proSelect"> <label class="layui-form-label">产品类别</label> <div class="layui-input-block editWidth"> <sel

  • jQuery操作Select的Option上下移动及移除添加等等

    复制代码 代码如下: <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="jquery-1.9.1.min.js"></script> <script type="text/javascript"> /**

  • 利用js给datalist或select动态添加option选项的方法

    有时需要从配置文件中读取信息,然后添加到用户的选择项中,比如select的option选项,下面针对此类情况做了一个实例 内容如下: <!DOCTYPE html> <html> <head> <title>鼠标点击时加载</title> <script type="text/javascript" src="jquery-1.8.3.js"></script> </head&

  • JQuery中对Select的option项的添加、删除、取值

    jQuery获取Select选择的Text和Value: 复制代码 代码如下: $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text var checkValue=$("#select_id

  • javascript 删除select中的所有option的实例

    javascript  删除select中的所有option的实例 方法一: function DeleteOptions() { var obj = document.getElementsByTagName("select")[0]; var selectOptions = obj.options; var optionLength = selectOptions.length; for(var i=0;i <optionLength;i++) { obj.removeChi

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

    如下所示: var selector=$('<select></select>'); for(var i=0;i<5;i++){ selector.append('<option value="'+i+'">'+i+'</option>'); } 以上这篇JQuery动态添加Select的Option元素实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • antd Select下拉菜单动态添加option里的内容操作

    antd Select下拉菜单动态添加option里的内容,通过form表单绑定select选中的值 提供一个公共的方法,每次只需去调用这个方法就行了 //这里是示例数据格式 let giftScope =[ { code:200, id:1, name:"张三" }, { code:300, id:2, name:"李四" }, { code:400, id:3, name:"王五" }, { code:500, id:4, name:&quo

  • javascript  删除select中的所有option的实例

    javascript  删除select中的所有option的实例 方法一: function DeleteOptions() { var obj = document.getElementsByTagName("select")[0]; var selectOptions = obj.options; var optionLength = selectOptions.length; for(var i=0;i <optionLength;i++) { obj.removeChi

随机推荐