首頁 >web前端 >js教程 >select中指定option選取觸發事件詳解

select中指定option選取觸發事件詳解

小云云
小云云原創
2018-03-17 15:17:5411323瀏覽

我們在用到下拉列錶框select時,需要對選取的5a07473c87748fb1bf73f23d45547ab8選項觸發事件,其實5a07473c87748fb1bf73f23d45547ab8本身沒有觸發事件方法,我們只有在select裡的onchange方法裡觸發。
想加入一個option的觸發事件,在option中加入onclick 點來點去就是不會觸發事件
又在select中加入onclick 這下可好了,沒選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>的名称
}
js方法:
‍‍<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>
jq方法:
<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下拉框選取的的值
現在有一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:取得選取項目的value:  myselect.options[index]. .value;
  4:拿到選取項目options的text:  myselect.options[index].text;
二:jquery方法(前提是已經載入了jquery函式庫)
1:var options=$ ("#test option:selected");  //取得選取的項目
2:console.log(options.val());   //拿到選取項目的值
3:console.log(options .text());   //拿到選取項目的文字

相關推薦:

select的option疊加怎樣處理

######################### ###javascript刪除select中的所有option程式碼分享############Html中Select的option怎樣設定預設選擇######

以上是select中指定option選取觸發事件詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn