yorickshan
8/31/2018 - 11:21 AM

select下拉框

更新下拉框显示为空

//javascript
document.getElementById(selector).selectedIndex = -1;

//jQuery
$(selector).selectedIndex = -1;

//有时候 selectedIndex 属性不直接属于选择器所在对象,需要查看一下属性的具体位置,然后定位
$(selector)[0].selectedIndex = -1;

获取下拉框当前选择项的文本和值

<span>
      <select id="AreaId" name="AreaId" size="1" class="sel">
           <option>-请选择地区-</option>
           <option value="1">北京</option>
           <option value="2">上海</option>
           <option value="3">深圳</option>
       </select>
</span>

///javascript
//value
document.getElementById("AreaId").value;//有效,能得到正确的值.

var index=document.getElementById("AreaId").selectedIndex;//获取当前选择项的索引.
document.getElementById("AreaId").options[index].value;//获取当前选择项的值.

var obj=document.getElementById("AreaId");
  for(i=0;i<obj.length;i++) {//下拉框的长度就是它的选项数.
    if(obj[i].selected==true) {
      var text=obj[i].value;//获取当前选择项的值.
  }
}

//text
var index=document.getElementById("AreaId").selectedIndex;//获取当前选择项的索引.
document.getElementById("AreaId").options[index].text;//获取当前选择项的文本.

document.getElementById("AreaId").options[index].innerHTML;//获取当前选择项的文本.

var obj=document.getElementById("AreaId");
  for(i=0;i<obj.length;i++) {//下拉框的长度就是它的选项数.
      if(obj[i].selected==true) {
        var text=obj[i].text;//获取当前选择项的文本.
    }
}
    
document.getElementById("AreaId").text;//注意,这句代码无效,得到的结果为undefined.

///jQuery
//value
$("#AreaId").val();//获取当前选择项的值.

var options=$("#AreaId option:selected");//获取当前选择项.
options.val();//获取当前选择项的值.

//text
var options=$("#AreaId option:selected");//获取当前选择项.
options.text();//获取当前选择项的文本.

options.innerHTML();//获取当前选择项的文本.

$("#AreaId").text;//注意,这句代码无效,得到的结果为undefined.

///other
innerText:

var index=document.getElementById("AreaId").selectedIndex;//获取当前选择项的索引.

document.getElementById("AreaId").options[index].innerText;//获取当前选择项的文本,IE支持,Firefox不支持.

document.getElementById("AreaId").innerHTML;//获取当前下拉框所有的元素,包括Html代码.注意大小写.
document.getElementById("AreaId").textContent;//获取当前下拉框中所有的选择项文本,不包括Html代码.