實現 select中指定option選中觸發事件
阿新 • • 發佈：2019-01-28
我們在用到下拉列表框select時，需要對選中的<option>選項觸發事件，其實<option>本身沒有觸發事件方法，我們只有在select裡的onchange方法裡觸發。
當我們觸發select的雙擊事件時，用ondblclick方法。當我們要取得select的選中事件時，用document.all['name'].value來獲取，其中name是select的名稱。如果我們要得到select的全部的值就用一個for迴圈來實現。程式碼如下： var vi = document.all['list'].length; for(var i=0;i<vi;i++){ document.form2.list(i).value; //form2是<form>的名稱 }下面介紹一個特殊情況的解決，由於option本身沒有事件，所以我們不能給每個option都新增一個onclick事件。如果需要實現點選不同的option,實現不同的函式時，要怎麼辦，從value裡取值在分析是一種辦法，但如果value裡的值不確定，我們又不想從value裡取值怎麼辦呢？可以這樣解決，給每個option新增一個屬性，然後在賦一個值，我們在函式裡取到這個屬性的值就可以判斷執行了。---------------------------------------------------------------------------------------------
-------------------------------------------------原始碼------------------------------------
<select id="pid" onchange="gradeChange()">
<option grade="1" value="a">選項一</a>
<option grade="2" value="b">選項二</a>
</select>
<script type="text/javascript">
function gradeChange(){
var objS = document.getElementById("pid");
var grade = objS.options[objS.selectedIndex].grade;
alert(grade);
}
</script>
當我們觸發select的雙擊事件時，用ondblclick方法。當我們要取得select的選中事件時，用document.all['name'].value來獲取，其中name是select的名稱。如果我們要得到select的全部的值就用一個for迴圈來實現。程式碼如下： var vi = document.all['list'].length; for(var i=0;i<vi;i++){ document.form2.list(i).value; //form2是<form>的名稱 }下面介紹一個特殊情況的解決，由於option本身沒有事件，所以我們不能給每個option都新增一個onclick事件。如果需要實現點選不同的option,實現不同的函式時，要怎麼辦，從value裡取值在分析是一種辦法，但如果value裡的值不確定，我們又不想從value裡取值怎麼辦呢？可以這樣解決，給每個option新增一個屬性，然後在賦一個值，我們在函式裡取到這個屬性的值就可以判斷執行了。---------------------------------------------------------------------------------------------
-------------------------------------------------原始碼------------------------------------
<select id="pid" onchange="gradeChange()">
<option grade="1" value="a">選項一</a>
<option grade="2" value="b">選項二</a>
</select>
<script type="text/javascript">
function gradeChange(){
var objS = document.getElementById("pid");
var grade = objS.options[objS.selectedIndex].grade;
alert(grade);
}
</script>