JavaScript DOM 表单元素之 select

html 标签

select 标签是下拉选中框

        <select id="city" multiple="multiple"  onchange="dochange()"  name="city"  style=" width:300px; ">
              <option value="1">上海</option>
              <option value="2">北京</option>
              <option value="3">广州</optgroup>
        </select>

常用的特殊属性： multiple="multiple" :设置下拉框为多选下拉框

Dom 中实现

是由HTMLSelectElement 来实现的

特有的属性和方法 ;

add(newOption,relOption); 插入新的选项，其位置在指定relOption的前面
multiple: boolen值，设置是否可以多项选择，等同于HTML中的multiple属性
options:控件中的所有的<option>元素的HTMLCollection ; IE8及以下版本返回的结果不只是选项集合，考虑到兼容性不推荐使用
remove(index); 移除指定位置的选项:
selectedIndex: 基于0的选中项的索引，未选择的时为-1；
size:选择框中可见的行数。
value:选中项的值：没有选择项： value 值为空字符串；只有一个选中项如果有指定value特性，value的值等于选中项的value特性。如果没有指定value特性， value的值等于该项的文本 {IE下返回空字符串} 有多个选中项：取第一个选中项的值。（不推荐使用，兼容性不好）

总结DOM中常用的方法

清空选项: select.options.length=0;

添加选项 select.options.add(new option(text,value));

删除选项： select.options.removeChild(optionItem); 或者 select.options.remove(optionindex);

禁用下拉框： select.setAttribute("disabled","disabled");

启用下拉框： select.removeAttribute("disabled");

设置选项： select.options[1].selected="selected"; //如果有多个选项，不会清空之前的选项

select.selectIndex=1; //如果由多个选项，会清空之前的选项。

封装如下:

var selectUtil=(function(){
        
        动态加载选项
      function    initDate(e,sel)
          {
              
             //清空selet选项
              sel.options.length=0;  //Dom 清空选项
              for(var op in options)
              {
                  console.log(options[op].value_str);
                  var op=new Option(options[op].text_str,options[op].value_str);
                  sel.options.add(op);
              }
          }
      
            //设置选中值--利用selected属性  不会取消之前的选中值
         function setSelectValue(value){
             var options=document.getElementById("city").children;
             for(var item in options)
             {
                 if(options[item].value==value)
                 {
                     options[item].selected="selected";
                     break;
                 }
             }
         }
         
         //设置选中值--- 利用selectedindex属性   会取消之前的选择项
         function setSelectIndex(value1){
           var city=document.getElementById("city");
             for(var item in city.children)
             {
                 if(city.children[item].value==value1)
                 {
                     city.selectedIndex=item;
                     break;
                 }
             }
         }
         //获取选中值 循环获取，这里循环不要用options :因为低版本下options属性不只包含下拉选项
         function getSelected(){
           var city=document.getElementById("city");
           var selItem=new Array();
             for(var item in city.children)
             {
                 if(city.children[item].selected)
                 {
                     selItem.push(city.children[item].value);
                 }
             }
             return selItem;
         }
         
         function doDel(value1)
         {
             var city=document.getElementById("city");
             
             for(var item in city.children)
             {
                 if(city.children[item].value==value1)
                 {
                 // city.removeChild(city.children[item]);   或者
                   city.remove(item);
                     break;
                 }
             }
         }
          return {
              initDate:initDate,  //动态加载select
              setSelectValue:setSelectValue, //设置选中值 设置选项selected 属性  
              setSelectIndex:setSelectIndex ,   //设置下拉选择框选中值 selectIndex 方式
              getSelectValue:getSelected,   //获取选中项
              doDel:doDel
          }
     })();


//禁用和启用下拉选择框
var city=document.getElementById("city");
if(city.hasAttribute("disabled"))
{
city.removeAttribute("disabled");
this.value="禁用下拉框";
}else{
city.setAttribute("disabled","disabled");
this.value="启用下拉框";
}
}

Jquery 中操作

       //清空选项
        $("#city").empty();
         //动态加载
        $.each(options,function(i,item){
            //$("#city").append(new Option(item.text_str,item.value_str)); //这两种方式都可以
            $("#city").append("<option value='"+item.value_str+"'>"+item.text_str+"</option>");
        })
        
        //设置选择项
        $("#doselect").click(function(){
            $("#city").val($("#select_Value").val());  //会清空原来选中的项目
            $("#city option[value='"+$("#select_Value").val()+"']").prop("selected",true); //不会清空原来的选中项目  jqeury中是设置true
        })
        
        //获取选中的值
        $("#getselect").click(function(){
            //返回选择项的数组集合
            $("#text_select").val($("#city").val());
        })
        
        $("#doDisabled").click(function(){
            if($("#city").attr("disabled"))
            {
                $("#city").removeAttr("disabled");    
            }else{
                
            $("#city").attr("disabled","disabled");
            
            }
        })
        
        
        })

事件

change: 当选项值发生变化的时候触发

JavaScript DOM 表单元素之 select

猜你喜欢