zoukankan      html  css  js  c++  java
  • javascript select option对象总结

    一、基础理解:
    var e = document.getElementById("selectId");
     
    e.options = new Option("文本", "值");    //创建一个option对象,即在<select>标签中创建一个或多个<option value="值">文本</option>。options是一个数组,里面可存放多个<option value="值">文本</option>标签。
     
    1、options数组的属性:
    length -------长度属性
    selectedIndex ------ 当前被选中的文本的索引值,此索引值是内存自动分配的(0,1,2,3....)对应(第一个文本值,第二个文本值,第三个文本值,第四个文本值.......)
     
    2、单个option的属性(即obj.options[obj.selectedIndex]是指定的某个<option>标签):
    text ===== 返回/指定文本
    value =====返回/指定文本,与<option value="...">一致
    index ======返回下标
    selected======返回/指定该对象是否被选中,指定true or false可动态改变选中项
    defaultSelected =====返回该对象默认是否被选中,true/false
     
    3、option的方法:
    增加一个<option>标签======obj.options.add(new("文本", "值"))
    删除一个<option>标签======obj.options.remove(obj.selectedIndex);
    获取一个<option>标签======obj.options[obj.selectedIndex].text ;
    修改一个<option>标签======obj.options[obj.selectedIndex] = new Option("新文本", "值") ;
    删除所有<option>标签======obj.options.length = 0 ;
    获取一个<option>标签的值====obj.options[obj.selectedIndex].value ;
     
    注意:
    obj.option中的option不需要大写
    new Option中的option需要大写
     
    二、示例:
    <html>    
    <head>    
    <script language="javascript">    
    function chk(){    
    var obj = document.getElementById("mySelect");    
            obj.options[obj.selectedIndex] = new Option("我的测试","4");//改变当前选中的文本 
            //obj.options.add(new Option("我的测试","4"));//再添加一个option    
            //alert(obj.selectedIndex);//显示序号,option自己设置的    
         // obj.options[obj.selectedIndex].text = "我的测试";//更改值    
         //obj.remove(obj.selectedIndex);逐个删除    
         //obj.options.length = 0;//删除全部 

         //t = obj.options[obj.selectedIndex].text;//获取文本 
         //alert(t); 
        
         //v = obj.options[obj.selectedIndex].value;//获取选中文本的值 
        // alert(v); 
    }    
    </script>    
    </head>    
    <body>    
    <select id="mySelect">    
             <option value="1111">我的1111</option>    
             <option value="2222">我的2222</option>    
             <option value="3333">我的3333</option>    
             <option value="4444">我的4444</option>    
    </select>    
    <input type="button" name="button" value="查看结果" onclick="javascript:chk();">    
    </body>    
    </html>
  • 相关阅读:
    解决IDEA springBoot读取*.properties文件中文内容乱码的问题
    springboot读取自定义properties配置文件方法
    解决Vue调用springboot接口403跨域问题
    eclipse springboot工程打war包方法及在Tomcat中运行的方法
    Android native进程间通信实例-socket本地通信篇之——服务端进程异常退出解决办法
    Android native进程间通信实例-socket本地通信篇之——基本通信功能
    Android native进程间通信实例-binder篇之——解决实际问题inputreader内建类清楚缓存
    Android native进程间通信实例-binder篇之——用parcel传输数组
    Android native进程间通信实例-binder篇之——简单的单工通信
    解决多类开机弹框问题
  • 原文地址:https://www.cnblogs.com/kungfupanda/p/1758244.html
Copyright © 2011-2022 走看看