整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
拉菜單的屬性
length 表示選項<option>的個數
selected 布爾值,表示選項<option>是否被選中
SelectedIndex 被選中的選項序號,如果沒有被選中則為-1,對于多選下拉菜單而言,返回被選中的第一個選項序號。從0開始計數
text 選項的文本(它是option專有的屬性)
value 選項的value值
type 下拉菜單的類型。單選返回select-one,多選返回select-multiple
options 獲取選項的數組，列如oSelectBox.options[2]表示下拉菜單oSelectBox中的第3項
訪問選中項
下拉菜單(單選):
<html>
<head>
<title>下拉菜單，單選</title>
<style>
<!--
form{
padding:0px; margin:0px;
font:14px Arial;
}
-->
</style>
<script language="javascript">
function checkSingle(){
var oForm = document.forms["myForm1"];
var oSelectBox = oForm.constellation;
var iChoice = oSelectBox.selectedIndex; //獲取選中項
alert("您選中了" + oSelectBox.options[iChoice].text); //下拉菜單，單選
}
</script>
</head>
<body>
<form method="post" name="myForm1">
<label for="constellation">星座：</label>
<p>
<select id="constellation" name="constellation">
<option value="Aries" selected="selected">白羊</option>
<option value="Taurus">金牛</option>
<option value="Gemini">雙子</option>
<option value="Cancer">巨蟹</option>
<option value="Leo">獅子</option>
<option value="Virgo">處女</option>
<option value="Libra">天秤</option>
<option value="Scorpio">天蝎</option>
<option value="Sagittarius">射手</option>
<option value="Capricorn">摩羯</option>
<option value="Aquarius">水瓶</option>
<option value="Pisces">雙魚</option>
</select>
</p>
<input type="button" onclick="checkSingle()" value="查看選項" />
</form>
</body>
</html>下拉菜單(多選):
<html>
<head>
<title>下拉菜單，多選</title>
<style>
<!--
form{
padding:0px; margin:0px;
font:14px Arial;
}
p{
margin:0px; padding:2px;
}
-->
</style>
<script language="javascript">
function checkMultiple(){
var oForm = document.forms["myForm1"];
var oSelectBox = oForm.constellation;
var aChoices = new Array();
//遍歷整個下拉菜單
for(var i=0;i<oSelectBox.options.length;i++)
if(oSelectBox.options[i].selected) //如果被選中
aChoices.push(oSelectBox.options[i].text); //壓入到數組中,可以用于單選的情況;
alert("您選了：" + aChoices.join()); //輸出結果
}
</script>
</head>
<body>
<form method="post" name="myForm1">
<label for="constellation">星座：</label>
<p>
<select id="constellation" name="constellation" multiple="multiple" style="height:180px;">
<option value="Aries">白羊</option>
<option value="Taurus">金牛</option>
<option value="Gemini">雙子</option>
<option value="Cancer">巨蟹</option>
<option value="Leo">獅子</option>
<option value="Virgo">處女</option>
<option value="Libra">天秤</option>
<option value="Scorpio">天蝎</option>
<option value="Sagittarius">射手</option>
<option value="Capricorn">摩羯</option>
<option value="Aquarius">水瓶</option>
<option value="Pisces">雙魚</option>
</select>
</p>
<input type="button" onclick="checkMultiple()" value="查看選項" />
</form>
</body>
</html>通用的訪問下拉菜單選中項的方法:
<script language="javascript">
function getSelectValue(Box){ //Box參數select標簽的ID值
var oForm = document.forms["myForm1"];
var oSelectBox = oForm.elements[Box]; //根據參數相應的選擇下拉菜單
if(oSelectBox.type == "select-one"){ //判斷是單選還是多選
var iChoice = oSelectBox.selectedIndex; //獲取選中項
alert("單選，您選中了" + oSelectBox.options[iChoice].text);
}else{
var aChoices = new Array();
//遍歷整個下拉菜單
for(var i=0;i<oSelectBox.options.length;i++)
if(oSelectBox.options[i].selected) //如果被選中
aChoices.push(oSelectBox.options[i].text); //壓入到數組中
alert("多選，您選了：" + aChoices.join()); //輸出結果
}
}
</script>函數使用方法:
<select id="constellation1" name="constellation1">
<option value="Aries" selected="selected">白羊</option>
<option value="Taurus">金牛</option>
<option value="Gemini">雙子</option>
<option value="Cancer">巨蟹</option>
<option value="Leo">獅子</option>
<option value="Virgo">處女</option>
<option value="Libra">天秤</option>
<option value="Scorpio">天蝎</option>
<option value="Sagittarius">射手</option>
<option value="Capricorn">摩羯</option>
<option value="Aquarius">水瓶</option>
<option value="Pisces">雙魚</option>
</select>
<input type="button" onclick="getSelectValue('constellation1')" value="查看選項" />添加、替換、刪除選項
通過構造函數Option()直接添加value、text等信息，相當方便
var oOption = new Option(text,value,defaultSelected,selected)
defaultSelected為布爾型值:1(true)設置下拉式表單默認值,
selected為布爾值:1(true)表示被選中
最后兩項默認值為0,如果不希望添加的選項被默認選中則可以忽略,添加選項時通常將<select>列表的第length項直接設置為新的選項,即在末尾增加。
添加選項：
<html>
<head>
<title>添加選項</title>
<style>
<!--
form{padding:0px; margin:0px; font:14px Arial;}
p{margin:0px; padding:3px;}
input{margin:0px; border:1px solid #000000;}
-->
</style>
<script language="javascript">
function AddOption(Box){ //添加選項，參數為<select>標簽的ID值
var oForm = document.forms["myForm1"];
var oBox = oForm.elements[Box];
var oOption = new Option("乒乓球","Pingpang");
oBox.options[oBox.options.length] = oOption; //在菜單末尾添加選項
}
</script>
</head>
<body>
<form method="post" name="myForm1">
球類：
<p>
<select id="ball" name="ball" multiple="multiple">
<option value="Football">足球</option>
<option value="Basketball">籃球</option>
<option value="Volleyball">排球</option>
</select>
</p>
<input type="button" value="添加乒乓球" onclick="AddOption('ball');" />
</form>
</body>
</html>替換選項
如果下拉菜單中的序號為已經存在了的選項,添加時則會自動替換原有的選項
oBox.options[iNum]=oOption;//替換iNum個選項
<html>
<head>
<title>替換選項</title>
<style>
<!--
form{padding:0px; margin:0px; font:14px Arial;}
p{margin:0px; padding:3px;}
input{margin:0px; border:1px solid #000000;}
-->
</style>
<script language="javascript">
function ReplaceOption(Box,iNum){ //替換選項,參數Box為<select>的ID值,iNum為替換的選項序號;
var oForm = document.forms["myForm1"];
var oBox = oForm.elements[Box];
var oOption = new Option("乒乓球","Pingpang");
oBox.options[iNum] = oOption; //替換第iNum個選項
}
</script>
</head>
<body>
<form method="post" name="myForm1">
球類：
<p>
<select id="ball" name="ball" multiple="multiple">
<option value="Football">足球</option>
<option value="Basketball">籃球</option>
<option value="Volleyball">排球</option>
</select>
</p>
<input type="button" value="籃球替換為乒乓球" onclick="ReplaceOption('ball',1);" />
</form>
</body>
</html>添加選項到具體位置
<html>
<head>
<title>添加到具體位置</title>
<style>
<!--
form{padding:0px; margin:0px; font:14px Arial;}
p{margin:0px; padding:3px;}
input{margin:0px; border:1px solid #000000;}
-->
</style>
<script language="javascript">
function AddOption(Box,iNum){
var oForm = document.forms["myForm1"];
var oBox = oForm.elements[Box];
var oOption = new Option("乒乓球","Pingpang");
oBox.insertBefore(oOption,oBox.options[iNum]);
}
</script>
</head>
<body>
<form method="post" name="myForm1">
球類：
<p>
<select id="ball" name="ball" multiple="multiple">
<option value="Football">足球</option>
<option value="Basketball">籃球</option>
<option value="Volleyball">排球</option>
</select>
</p>
<input type="button" value="添加乒乓球" onclick="AddOption('ball',1);" />
</form>
</body>
</html>以上代碼IE7中雖然在正確的位置插入了選項,但內容卻沒有顯示出來(bug問題)
兼容性更好的代碼,使用方法與以上相同;
<script language="javascript">
function AddOption(Box,iNum){
var oForm = document.forms["myForm1"];
var oBox = oForm.elements[Box];
var oOption = new Option("乒乓球","Pingpang");
//兼容IE7，先添加選項到最后，再移動
oBox.options[oBox.options.length] = oOption;
oBox.insertBefore(oOption,oBox.options[iNum]);
}
</script>注意：IE9已經解決了bug問題
刪除下拉菜單的選項:
刪除下拉菜單中的某個選項時相對最簡單的,只需要將這個選項設置為null即可
bBox.options[iNum]=null;
天遇到個來咨詢利用原生的JS代碼來修改HTML代碼的的童鞋，耐心的給這個童鞋做了解答后，然后整理了一下測試代碼，寫成文章記錄一下，方便以后有同需求的站長們。
HTML原始代碼
<form action="" method="post" class="form"> <input id="mm" type="text" > <input id="mochu" type="text" onclick="act(this.value)" /> <input id="mc" type="text" > </form>
利用JS代碼將以上HTML代中的 id 為 mochu 的 input 中的 cnclick 屬性去掉
<input id="mochu" type="text" onclick="act(this.value)" />
換成
<input id="mochu" type="text" />
利用 JS中dom對象的 outerHTML 屬性，可以輕松的解決這個問題
outerHTML：設置或獲取對象及其內容的 HTML 形式
例：JS獲取元表本身的HTML代碼
代碼：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="" method="post" class="form">
<input id="mm" type="text" value="飛鳥慕魚博客" >
<input id="mochu" type="text" onclick="act(this.value)" value="http://www.feiniaomy.com" />
<input id="mc" type="text" >
</form>
<script>
var html = document.getElementById('mochu').outerHTML;
console.log(html);
</script>
</body>
</html>
打印結果：
例：js修改指定元素的本身的HTML代碼
通上面的例子，可以知道 outerHTML 屬性可以獲取到元素本身的HTML代碼，既然可以獲取也能設置或修改元素本身的代碼
代碼：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="" method="post" class="form">
<input id="mm" type="text" value="飛鳥慕魚博客" >
<input id="mochu" type="text" onclick="act(this.value)"/>
<input id="mc" type="text" >
</form>
<script>
var html = document.getElementById('mochu').outerHTML = '<input id="mochu" type="text" value="http://www.feiniaomy.com" />';
</script>
</body>
</html>
運行結果如圖所示
以下是與 outerHTML 功能相似的屬性，下一篇文章會詳細說明一下他們的作用與區別
innerHTML:設置或獲取對象起始標簽和結束標簽之間的內容。
innerText:設置或獲取位于對象起始和結束標簽內的文本
outerHTML:設置或獲取對象及其內容的 HTML 形式
outerText:設置或獲取對象的文本
、表單：
網頁僅有表單才能接收用戶輸入信息、并將信息提交到服務器進行處理。
表單在網頁中主要負責數據采集功能。一個表單有三個基本組成部分： 表單標簽：這里面包含了處理表單數據所用CGI程序的URL以及數據提交到服務器的方法。 表單域：包含了文本框、密碼框、隱藏域、多行文本框、復選框、單選框、下拉選擇框和文件上傳框等。 表單按鈕：包括提交按鈕、復位按鈕和一般按鈕；用于將數據傳送到服務器上的CGI腳本或者取消輸入，還可以用表單按鈕來控制其他定義了處理腳本的處理工作。
二、制作規范的表單
<form name="表單名稱" method="提交的方式:get|post" action="處理表單的服務器地址">
一系列的表單對象
提交按鈕:<input type="submit" value="提交" name="sum" />
</form>
注意：表單必須要有提交按鈕,作用:當點擊提交鈕時，會自動將表單中的數據提交到表單action屬性所指定的地址進行處理.
三、定義表單對象
1.使用input標簽定義表單對象
<input type="元素類型" name="表單對象名稱" value="表單對象的值">
1.1 type的類型:
text(文本框)、password(密碼框)、checkbox(復選框)、radio(單選按鈕)
submit(提交按鈕)、reset(重置按鈕)、file(文件域)、button(按鈕)、
image(圖片域：具備提交按鈕)、hidden(隱藏域)、
date(日期控件:html5新增的)、number(數字調節器:html新增的)
2.使用select標簽定義下拉列表
<select name="sel">
<option value="項值">項文本</option>
<option value="研究生">研究生</option>
<option value="本科">本科</option>
....
</select>
3.使用textarea定義文本域:
<textarea cols="80" rows="8">請輸入內容</textarea>
四、常用表單對象的屬性
1.文本框:
<input type="text" name="uname" value="Admin" maxlength="最大字符數:15" size="文本框長度:10" readonly="只讀:readonly"/>
2.設置單選框和復選框的默認選中
checked="checked"屬性
3.使用selected屬性設置下拉列表的選中項
<option value="本科" selected="selected">本科</option>
來自網絡
五、css(Cascading style sheet):級聯（層疊）樣式表。
1.作用：修飾html標簽
2.優勢：
內容與表現分離；
網頁的表現統一，容易修改；
豐富的樣式，使得頁面布局更加靈活；
減少網頁的代碼量，增加網頁的瀏覽速度，節省網絡帶寬；
運用獨立于頁面的CSS，有利于網頁被搜索引擎收錄。
六、在html文檔添加css樣式的方法。
1.行內樣式：使用標簽的style屬性添加樣式
<標簽 style="一系列的樣式規則">
樣式規則的格式:樣式屬性:樣式屬性值;
2.內部樣式:使用style標簽定義樣式
<style type="text/css">
一系的樣式選擇器(選擇器必需先定義，后引用)
</style>
注意：通常情況style標簽放在head標簽中。
2.1基本選擇器分類：類選擇器、Id選擇器、標簽選擇器
2.2使用類選擇器
定義類選擇器
.類選擇器名{一系列樣式}
引用類選擇器:使用標簽的class屬性引用類選擇器名稱
2.3使用Id選擇器
定義id選擇器
#id選擇器名{一系列樣式規則}
引用ID選擇器:使用標簽的ID屬性引用ID選擇器名稱
2.4定義標簽選擇器
標簽名稱{一系列樣式規則}
引用標簽選擇器:當使用該標簽時自動套動標簽樣式
3.外部樣式:
外部樣式是將一系列樣式選擇器定義在外部樣式文件（**.css）中
3.1在網頁使用link標簽引用外部樣式文件
<link href="index.css" type="text/css" rel="stylesheet" />
七、樣式優先級（就近原則）
行內樣式>內部樣式>外部樣式
id選擇器>類選擇器>標簽選擇器
八、高級選擇器(復合選擇器)
1.層選選擇器
1.1后代選擇器
定義后代選擇器
選擇器1 選擇器2{一系列樣式規則}
使用：必需先用選擇器1,再使用選擇器2,且選擇器存在層次關系
1.2子選擇器
定義子選擇器
選擇器1>選擇器2{一系列樣式規則}
使用：必需先用選擇器1,再使用選擇器2,且選擇器存在父子關系
1.3相鄰兄弟選擇器
定義相鄰兄弟選擇器
選擇器1+選擇器2{一系列樣式規則}
使用：必需先用選擇器1,再使用選擇器2,且相鄰的
1.4通用相鄰兄弟選擇器
定義通用相鄰兄弟選擇器
選擇器1~選擇器2{一系列樣式規則}
使用：必需先用選擇器1,再使用選擇器2,且相鄰之后的所有兄弟
2.交集選擇器
定義交集選擇器
標簽選擇器類選擇器|id選擇器
使用：使用標簽的同時還引用類或者id選擇器
3.并集選擇器
定義并集選擇器
選擇器1,選擇器2
使用：使用選擇器1 或者 選擇器2 都行
九、span標簽
文本標簽，由內容決定自身大小。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
