表单元素-select

<form>
    <select  size="2">
        <option value="JMS HADEN">JMS HADEN</option>
        <option value="US">US</option>
        <option value="JMS">JMS</option>
        <option value="HADEN" selected>HADEN</option>
    </select>
    <div id="selectedOption">

    </div>
    <button type="button">add</button>
    <button type="button">remove</button>
    <button type="button">getValue</button>
    <button type="button">getOptions</button>
    <button type="button">selectedAnyItem</button>
</form>

　　HTMLSelectElement select

　　　select又叫选择框，是通过 select 和 option元素创建的。为了方便与这个控件交互，除了所有表单字段共有属性外，

　　　　类型还提供了下列属性和方法。

add(newOption,relOption)	向控件中添加选项
multiple	布尔值，表示是否允许多选
options	控件所有的option集合 HTMLCollection
remove(index)	移除给定位置的选项
selectedIndex	选项的索引，如果没有选中择为-1，如果选择是多项式，则为保存第一项的索引
size	选择框中可见的行数
value	选择框选中的值
type	"select-one" \| "select-multiple 取决于是否有 multiple

注意：当没有选择任何一项时，获取value时返回空； 当选择了option时,并存在value属性，其值就是对应的 value; 当选择了option时，并不存在HTML属性value时，则其值对应为 option的文本内容供。

　　HTMLOptionElement　　option

index	当前选项在Options集中的索引
label	当前选项的标签
selected	表述选项是否被选中，选中为true
text	选项的文本
value	选择项的value值

其中大部分属性的目的，都是为了方便对选项数据的访问。虽然也可以使用常规的DOM功能来访问这些信息，但效率是比较低的，如下面的例子所示：

　　   var  selectbox= document.forms[0].elements[0];  
 //不推荐
   　　 var text = selectbox.options[0].firstChild.nodeValue;
     var value = selectbox.options[0].getAttribute("value");

    //推荐

        var text = selectbox.options[0].text;
    var value = selectbox.options[0].value;

所以一般在操作选项时，最好使用特定于选项的属性，因为浏览器都支持这些属性。

change事件触发时机：在选项发送改变时触发，与前面表述的 input等表单元素不一样。

　　　　★★：select对象的 value值因浏览器而异，在IE8以及低版中，当未指定value属性时，其返回的值为空。但是IE9+ 、Safari、Firefox、Chrome、Opera则会返回与text特性相同的值

选择选项

　　　　两种情况，一种是单选、另一种是多选

　　　　当为单选选时，可以通过使用选择框的selectedIndex属性获取对应的选项　

var selectedOption = selectbox.options[selectbox.selectedIndex];

　　对于多选来说，selectedIndex 代表是选择项中的第一个索引值，所以这种方式行不通，那我们可以使用前面列出的 option对象的属性 selected

　　selected 既然是表述当前选项是否被选中，那我们是否可以通过selected属性来动态选中某个选项尼？

 selectbox.options[selectbox.options.length-1].selected = true;

上面是通过 options 属性找到选择框中所有的项，并选中最后一个项。

　　　　注意：多选的时候，当选择框中已存在某个选项被选择时，通过动态选择框中其它项时，并不会取消移除已被选择的其它项。

　　　　　　单选则会移除;

　既然可以通过 selected设置选中某个选项，那我们选中时，selected 代表的值是什么尼？假设最后一项被选中

 selectbox.options[selectbox.options.length-1].selected     // true

　　通过上面我们就可以根据不同模式下，来获取当前被选择的项：

 (function(window,document,undefined){
        window.OperSelect = function(selector,option){
            var _select = document.querySelector(selector);
          //当对于单选时或者多选时只选择了一项时，可以通过  selectedIndex 属性来获取选项
            this.getSingle = function(){
                return _select.options[_select.selectedIndex];
            };
            //当对于多项时，可以通过 option选项的 selected 属性来作为是否选中的基准
            this.getSelectedOption = function(){
                var result = new Array();
                var options  = _select.options;
                var len = 0;
                for(var i=0;len = options.length,i<len;i++){
                    var option = options[i];
                    if(option.selected) {
                        result.push(option);
                    }
                }
                return result;
            };
            this.getOption = function(){
                if(_select.multiple)
                    return this.getSelectedOption();
                else
                    return this.getSingle();
            }
        };
    })(window,document,undefined);

上面是写一个公共的构造方法，方便对 select进行操作。

添加选项

　　　　添加选项的方式有下几种：

1. 　JavaScript DOM方式进行添加
  　　
```
        var o = document.createElement("option");
        var text = document.createTextNode("王景");
        o.setAttribute("value","wj");
        o.appendChild(text);
        selectbox.appendChild(o);
```
2. 　Option 构造函数方式进行添加　　
```
 var o = new Option("wj","王景");
 selectbox.appendChild(o);
```
  option 构造函数接收两个参数，第一个是value值，第二个是text值；通过这种方式也可以添加方式；在IE中却存在bug，IE8以及低版本中，text值无法设置进去。
  　
3. 　选择框的add()方法

　　　　　　　　DOM规定 add()方法接收两个参数，一个当前需要插入的和将位于新选项之后的选项。如果想在最后一项添加一项得把第二个参数设置为空。

　　　　　　　　而IE中对DOM方法 add 方法第二个参数是可选的，第二个参数为新元素插入之后的索引。如果要兼容跨浏览器，那么就不可能只传递一个参数，那么必须添加两个参数，其中第二个参数可以设置为 undefind，则可在选择框最后添加一项。

 var o = new Option("wj","王景");
 selectbox.add(o);

　　　　　　　　如果想兼容IE和其它浏览器，必须通过DOM技术和insertBefore()方法。

        var o = document.createElement("option");
        var text = document.createTextNode("王景");
        o.setAttribute("value","wj");
        o.appendChild(text);
        selectbox.appendChild(o);
        selectbox.insertBefore(o,selectbox.options[1]);

移除选项

　　　　DOM方法 removeChild

 selectbox.removeChild(selectbox.options[1]);

　　　　选择框提供方法　　remove

 selectbox.remove(0);

　　　　通过把对应 option设置为null

 selectbox.options[0] = null;

移动和重排序

　　　　　在DOM标准之前我们移动元素需要通过先判断当前添加的元素是否存在，存在则不添加。而利用DOM方法 appendChild可以添加把一个选择框中元素移动到另外一个选择框中。如果当前选择框中存在对应元素会先移除再追加到指定位置。

 selectbox.appendChild(selectbox1.options[1]);

　　　　则可以利用 insertBefore 进行重排序。

var removeOption  = selectbox.options[1];
selectbox.insertBefore(removeOption,selectbox.options[removeOption+2]);

　　　每次移除或者移动都会重置index。

posted @ 2016-07-30 11:07 czhyuwj 阅读(1374) 评论(0) 编辑收藏举报

刷新页面返回顶部

czhyuwj

表单元素-select

公告