JS實現(xiàn)select選中option觸發(fā)事件操作示例
本文實例講述了JS實現(xiàn)select選中option觸發(fā)事件操作。分享給大家供大家參考，具體如下：
我們在用到下拉列表框select時，需要對選中的<option>選項觸發(fā)事件，其實<option>本身沒有觸發(fā)事件方法，我們只有在select里的onchange方法里觸發(fā)。
想添加一個option的觸發(fā)事件,在option中添加onclick 點來點去就是不會觸發(fā)事件
又在select中添加onclick 這下可好了,沒選option呢就觸發(fā)了
百度來的說option沒有觸發(fā)事件,需要在select中加onchange事件,雖然我曾經(jīng)處理過類似的問題,用過就忘是不是豬腦子....
這次記住了吧應(yīng)該
當我們觸發(fā)select的雙擊事件時，用ondblclick方法。
當我們要取得select的選中事件時，用document.all['name'].value來獲取，其中name是select的名稱。
如果我們要得到select的全部的值就用一個for循環(huán)來實現(xiàn)。代碼如下：
var vi = document.all['list'].length;
for(var i=0;i<vi;i++){
document.form2.list(i).value; //form2是<form>的名稱
}
JS實現(xiàn)代碼：
<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>
jQuery實現(xiàn)代碼：
<select name="myselect" id="myselect">
<option value="opt1">選項1</option>
<option value="opt2">選項2</option>
<option value="opt3">選項3</option>
</select>
$("#myselect").change(function(){
var opt=$("#myselect").val();
...
});
Javascript獲取select下拉框選中的值
現(xiàn)在有一id=test的下拉框，怎么拿到選中的那個值呢？
分別使用javascript原生的方法和jquery方法
<select id="test" name=""> <option value="1">text1</option> <option value="2">text2</option> </select>
代碼:
一、javascript原生的方法
1. 拿到select對象：
var myselect=document.getElementById("test");
2. 拿到選中項的索引：
var index=myselect.selectedIndex; // selectedIndex代表的是你所選中項的index
3. 拿到選中項options的value：
myselect.options[index].value;
4:拿到選中項options的text：
myselect.options[index].text;
二、jquery方法（前提是已經(jīng)加載了jquery庫）
1.獲取選中的項
var options=$("#test option:selected");
2.拿到選中項的值
alert(options.val());
3.拿到選中項的文本
alert(options.text());
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript操作DOM技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要介紹了JS動態(tài)創(chuàng)建DOM元素的方法,涉及javascript動態(tài)創(chuàng)建DOM元素及DOM元素事件綁定與刪除的相關(guān)技巧,需要的朋友可以參考下2015-06-06
基于ts的動態(tài)接口數(shù)據(jù)配置的詳解
這篇文章主要介紹了基于ts的動態(tài)接口數(shù)據(jù)配置的詳解，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12![js為什么[]==![]是成立的嗎](http://img.jbzj.com/images/xgimg/bcimg2.png)
本文主要介紹了js為什么[]==![]是成立的嗎，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
JavaScript事件學(xué)習(xí)小結(jié)（三）js事件對象
這篇文章主要介紹了JavaScript事件學(xué)習(xí)小結(jié)（三）js事件對象的相關(guān)資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-06-06
webpack4升級到webpack5的實戰(zhàn)經(jīng)驗總結(jié)
有些老項目的包長時間沒有更新,導(dǎo)致項目中有些性能問題,在項目迭代中考慮升級包,下面這篇文章主要給大家介紹了關(guān)于webpack4升級到webpack5的實戰(zhàn)經(jīng)驗,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了JS判斷是否手機或pad訪問實現(xiàn)方法的相關(guān)資料,需要的朋友可以參考下2016-12-12
這篇文章主要介紹了JavaScript 異常處理 詳解,需要的朋友可以參考下2015-02-02
JavaScript數(shù)組，JSON對象實現(xiàn)動態(tài)添加、修改、刪除功能示例
這篇文章主要介紹了JavaScript數(shù)組，JSON對象實現(xiàn)動態(tài)添加、修改、刪除功能,結(jié)合實例形式分析了JavaScript針對json數(shù)組的添加、刪除、修改操作實現(xiàn)技巧,需要的朋友可以參考下2018-05-05
JavaScript 特有方法計算二進制中1的個數(shù) split方法
這是一道網(wǎng)上看到的前端的筆試題，主要思想是利用JavaScript的toString方法將十進制數(shù)轉(zhuǎn)換為二進制的字符串。然后for循環(huán)遍歷計算字符串中”1″出現(xiàn)的次數(shù)。2010-05-05
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)簡單貪吃蛇效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03