zoukankan      html  css  js  c++  java
  • Javascript操作Select

    一基础理解: 
    
    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.selecedIndex]是指定的某个<option>标签,是一个---) 
    
    text属性---------返回/指定 文本 
    
    value属性------返回/指定 值,与<options value="...">一致。 
    
    index属性-------返回下标, 
    
    selected 属性-------返回/指定该对象是否被选中.通过指定 true 或者 false,可以动态的改变选中项 
    
    defaultSelected 属性-----返回该对象默认是否被选中。true / false3: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 
    
    注意: 
    
    a:上面的写的是如这样类型的方法obj.options.function()而不写obj.funciton,是因为为了考虑在IE和FF 下的兼容,如obj.add()只能在IE中有效. 
    
    b:obj.option中的option不需要大写,new Option中的Option需要大写
    
    //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
    }

    转自:http://304288612.iteye.com/blog/297893

       http://www.geekso.com/Option/

  • 相关阅读:
    PHP生成二维码并上传到七牛云
    算法入门---选择排序
    算法入门
    react入门-refs
    react入门-props.children
    react入门-组件方法、数据和生命周期
    react入门-jsx
    递归
    node的path.join 和 path.resolve的区别
    vuex的使用
  • 原文地址:https://www.cnblogs.com/blogsme/p/3091234.html
Copyright © 2011-2022 走看看