程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 網頁編程 >> JSP編程 >> 關於JSP >> js操作select

js操作select

編輯:關於JSP

1.select默認是inline元素,你可以
 
select
{
    display:block;
}
2.默認select會選擇第一項option,如果初始狀態不選可以:
jq寫法:
$("select").each(function(){this.selectedIndex=-1});
或者干脆加個冗余option:
 
<select>
    <option>請選擇網站...</option>
    <option value="http://www.qq.com">騰訊網</option>
    <option value="http://www.163.com">網易</option>
    <option value="http://www.google.com">谷歌</option>
</select>
注:
 
The selectedIndex property returns -1 if a select object does not contain any selected items. Setting the selectedIndex property clears any existing selected items.
 
The selectedIndex property is most useful when used with select objects that support selecting only one item at a time—that is, those in which the MULTIPLE attribute is not specified. 
3.獲取選擇項的值:
 
<select id="ddlCities" onchange="alert(this.options[this.selectedIndex].value);">
    <option value="0">北京</option>
    <option value="1">濟南</option>
    <option value="2">威海</option>
</select>
獲取文本:
 
this.options[this.selectedIndex].text
更簡潔的直接selectObj.value
 
4.多選
 
<select id="ddlCities" multiple="multiple" size="2">
    <option value="0">北京</option>
    <option value="1">濟南</option>
    <option value="2">威海</option>
</select>
 使用jq獲取選擇,僅測試所以寫在標簽上:
 
<select id="ddlCities" multiple="multiple" size="2" onchange="alert($(this).find('option:selected').text());">
    <option value="0">北京</option>
    <option value="1">濟南</option>
    <option value="2">威海</option>
</select>
如果純js寫,需要循環了:
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
select
{
    display:block;
}
</style>
<script type="text/javascript">
function ddlCities_onchange(theSel)
{
    var arr=[];
    for(var i=0;i<theSel.options.length;i++)
    {
        if(theSel.options[i].selected)
            arr.push(theSel.options[i].innerText);  
    }
    alert(arr.join());
}
</script>
</head>
 
<body>
<select>
    <option>請選擇網站...</option>
    <option value="http://www.qq.com">騰訊網</option>
    <option value="http://www.163.com">網易</option>
    <option value="http://www.google.com">谷歌</option>
</select>
 
<select id="ddlCities" multiple="multiple" size="2" onchange="ddlCities_onchange(this);">
    <option value="0">北京</option>
    <option value="1">濟南</option>
    <option value="2">威海</option>
</select>
</body>
</html>
5.添加移除option:
jq添加:
$("<option value='3'>南京</option>").appendTo($("#ddlCities"));
js寫法:
 
var anOption = document.createElement("option");
anOption.text="南京";
anOption.value="4";
document.getElementById("ddlCities").options.add(anOption);
或者 document.getElementById("ddlCities").add(anOption);

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved