js动态添加,删除option及add的使用方法

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>动态建立select及option及add的使用</title>
   </head>
   <body>
   </body>
   <script type="text/javascript">
       //1.创建select
       function createSelect(){
           var mySelect = document.createElement("select");
           mySelect.id = "mySelect";
           document.body.appendChild(mySelect);
       }
       createSelect();
       //2.创建option
       function addOption(){
           //根据id查找对象，
           var obj=document.getElementById('mySelect');
           //添加一个选项
           //方法一：
           obj.add(new Option("文本text1","value值"));
           //或方法二：
           obj.options.add(new Option("文本text2","value值"));
       }
       addOption();

//       3.删除所有选项option
       function removeAll(){
           var obj=document.getElementById('mySelect');
           obj.options.length=0;
       }
//       removeAll();

//       4.删除一个选项option
       function removeOne(){
           var obj=document.getElementById('mySelect');
           //index,要删除选项的序号，这里取当前选中选项的序号
           var index=obj.selectedIndex;
           console.log(index)
           obj.options.remove(index);
       }
       removeOne();

//       5.获得选项option的值
       var obj=document.getElementById('mySelect');
       var index=obj.selectedIndex; //序号，取当前选中选项的序号
       var val = obj.options[index].value;
       console.log(val)
//       6.获得选项option的文本
       var obj=document.getElementById('mySelect');
       var index=obj.selectedIndex; //序号，取当前选中选项的序号
       var val2 = obj.options[index].text;

//       7.7.修改选项option
       var obj=document.getElementById('mySelect');
       var index=obj.selectedIndex; //序号，取当前选中选项的序号
       var val3 = obj.options[index]=new Option("新文本","新值");
//       8.删除select
       function removeSelect(){
           var mySelect = document.getElementById("mySelect");
           mySelect.parentNode.removeChild(mySelect);
       }

   </script>
</html>

转载于:https://www.cnblogs.com/gshufan/p/6171129.html

js动态添加,删除option及add的使用方法相关推荐

原生js动态为table追加html,JS动态添加Table的TR，TD实现方法
本文实例讲述了JS动态添加Table的TR,TD实现方法.分享给大家供大家参考.具体实现方法如下: var tempRow=0; var maxRows=0; function insertRows( ...
js删除与php后台交互,js动态添加删除,后台取数据(示例代码)_javascript技巧
环境描述:就像你一般在论坛上发表文章,可能带附件,附件的数量是你手动添加删除的!! /********************************************************* ...
js动态添加删除节点
转载于:https://www.cnblogs.com/jiaobaobao/p/6762692.html
js动态添加options(转载)
JS动态添加Option的几种方式在处理表单的时候,经常会有这样的需求:给定一定的数据来生成某个select的option,或者更进一步,某些option或许预先选中或者有高亮显示. 下面我们就来温 ...
js动态添加样式和jQuery动态添加样式
0.style方式添加样式 DOM对象.style.color = 'red'DOM对象.style.display = 'block/none' //让元素显示/隐藏 1.js动态添加样式 1.添加 ...
jQuery使用toggleClass方法动态添加删除Class样式的方法
本文实例讲述了jQuery使用toggleClass方法动态添加删除Class样式的方法.分享给大家供大家参考.具体分析如下: jQuery通过toggleClass方法动态添加删除Class,一次执 ...
layui upload.render上传组件js动态添加html后再次渲染
页面效果页面代码: <input type="hidden" name="mcBaunell" id="m ...
动态添加/删除HTML元素
动态添加/删除HTML元素 <HTML> <HEAD> <title>动态添加/删除HTML元素</title> <style type=&quo ...
js 动态添加 tabel 表格
js 动态添加 tabel 表格代码 <!DOCTYPE html> <html><head><title> new document </t ...

js动态添加,删除option及add的使用方法

js动态添加,删除option及add的使用方法相关推荐

最新文章

热门文章