select下拉框之JS/JQuery详细操作

下拉框的操作一直是我比较困扰的地方,以下将分别对js和jquery的操作进行比较性的说明。总结中也学习到了一些JQuery方法的使用技巧。

 

var sel_obj = 下拉框DOM对象

var $sel_obj = 下拉框JQuery对象

 

一、移除


 

1. 移除所有项:

  sel_obj.options.length = 0;

 

  $sel_obj.empty();

.empty()” 从被选元素移除所有内容,包括所有文本和子节点,保留其在dom中所占的位置

 

2. 移除下拉框中的一项:
  sel_obj.options.remove(index); 

index”为下拉框选项的索引值,若0索引项移出(自上而下),那么1索引项的索引会变为0,后面的索引依次向前推进

  移除所有项:(注意:倒循环)  

for(len=sel_obj.options.length, var i=len-1, ;i>=0;i--){



    sel_obj.options.remove(i); 

}

 

  $sel_obj.find("option").eq(index).remove();

.remove()” 从被选元素移除所有内容,包括所有文本和子节点,保留其在dom中所占的位置,这点与“.empty()”有所区别

 

二、添加


 

  sel_obj.options.add(new Option("text", "value"));

text”为下拉框选项的显示文本,“value”为下拉框选项的值,在下拉框末尾添加,索引值最大

 

  $sel_obj.append("<option value='value'>text</option>");

  $sel_obj.prepend("<option value='value'>text</option>");

“.append()”在下拉框末尾添加,添加后此项索引值最大; “.prepend()”在下拉框的首部添加,添加后此项索引值为0

 

四、获取


 

1. 获取下拉框选中项的值:
  sel_obj.options[sel_obj.selectedIndex].value;

 

  $sel_obj.val();

 

2. 获取下拉框选中项的文本:
  sel_obj.options[sel_obj.selectedIndex].innerText;

 

  $sel_obj.find("option:selected").text();

option:selected”为选中项,“option:first”为首项(索引值为0),“option:last”为末项(索引值最大)

 

3. 获取下拉框选中项的索引:
  sel_obj.selectedIndex;


  $sel_obj.prop("selectedIndex");

.prop()”应该被用来处理boolean attributes/properties以及在html(比如:window.location)中不存在的properties。其他所有的attributes(在html中你看到的那些)可以而且应该继续使用“.attr()”方法来进行操作。

   例如:

<select id="selId">

    <option value="a">AAA</option>

    <option value="b">BBB</option>

    <option value="c">CCC</option>

    <option value="e" selected="selected">EEE</option>

</select>

  结果为3。

 

五、判断


 

1. 判断下拉框是否选中:

  sel_obj.selectedIndex > -1 ? //选中 //没有选中;

 

  $sel_obj.prop("selected") ? //选中 //没有选中;

 

你可能感兴趣的:(jquery)