`
zhangfeilo
  • 浏览: 403501 次
  • 性别: Icon_minigender_1
  • 来自: 昆明
社区版块
存档分类
最新评论

js 操作select和option(转载)

    博客分类:
  • js
阅读更多

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("文本","值"));    //这个只能在IE中有效
         obj.options.add(new Option("text","value")); //这个兼容IE与firefox
     }

3.删除所有选项option

     function removeAll(){
           var obj=document.getElementById('mySelect');
obj.options.length=0;

     }

4.删除一个选项option

function removeOne(){
           var obj=document.getElementById('mySelect');

           //index,要删除选项的序号,这里取当前选中选项的序号

var index=obj.selectedIndex;
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);
     }

 

分享到:
评论

相关推荐

    select自定义

    在网页设计和开发中,`select`元素是一个非常常见的组件,用于创建下拉选择框。这个自定义`select`的实例旨在提供一种简单、快捷的方式来定制下拉框的外观和功能,使其更符合个人或项目的特定需求。下面将详细介绍这...

    js使用小技巧

    Javascript小技巧一箩筐 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcElement.releaseCapture(); 事件按键 event.keyCode ...

    Vue表单绑定的实例代码(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)

    Vue.js是一个流行的JavaScript框架,它允许开发者使用声明式的编程方式构建用户界面。在Web开发中,表单是必不可少的部分,而Vue提供了非常方便的方式来处理表单数据绑定以及用户输入。本文将详细介绍如何在Vue中...

    ASP.NET Gridview隐藏/显示列源码

    sb.Append("<option>- Show Column -</option></select></div>"); showHideColumnsLiteral.Text = sb.ToString(); } 在数据绑定到GridView之后,其余的工作由ShowHideColumns.js中的javascript来完成.当列头的...

    Ajax 模仿google百度提示输入框 v1.8

    转载请注明出处 此小程序是模仿Google(sgguest)输入提示框所编写 亦可用于用户注册邮箱时的提示 此程序使用方便简单、易用灵活 且不限Asp、php、net 更新说明: 1.支持xhtml 2.兼容IE6,IE7,FF 3.支持input显示与...

    飞飞Ajax模仿google提示输入框源码 v1.7

    当输入框失去焦点时,提示框会自动隐藏******************************************************************文件使用说明:在需要使用的页面首先要引用2个js文件此二文件必须放于调用函数之前*********************...

Global site tag (gtag.js) - Google Analytics