快捷導(dǎo)航

JS實(shí)現(xiàn)select選中option觸發(fā)事件操作示例

更新時(shí)間：2018年07月13日 11:40:27 作者：沖向藍(lán)天

這篇文章主要介紹了JS實(shí)現(xiàn)select選中option觸發(fā)事件操作,結(jié)合實(shí)例形式總結(jié)分析了javascript針對select下拉選中option項(xiàng)觸發(fā)事件相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了JS實(shí)現(xiàn)select選中option觸發(fā)事件操作。分享給大家供大家參考，具體如下：

我們在用到下拉列表框select時(shí)，需要對選中的<option>選項(xiàng)觸發(fā)事件，其實(shí)<option>本身沒有觸發(fā)事件方法，我們只有在select里的onchange方法里觸發(fā)。

想添加一個(gè)option的觸發(fā)事件,在option中添加onclick 點(diǎn)來點(diǎn)去就是不會(huì)觸發(fā)事件

又在select中添加onclick 這下可好了,沒選option呢就觸發(fā)了

百度來的說option沒有觸發(fā)事件,需要在select中加onchange事件,雖然我曾經(jīng)處理過類似的問題,用過就忘是不是豬腦子....

這次記住了吧應(yīng)該

當(dāng)我們觸發(fā)select的雙擊事件時(shí)，用ondblclick方法。
當(dāng)我們要取得select的選中事件時(shí)，用document.all['name'].value來獲取，其中name是select的名稱。
如果我們要得到select的全部的值就用一個(gè)for循環(huán)來實(shí)現(xiàn)。代碼如下：

var vi = document.all['list'].length;
for(var i=0;i<vi;i++){
  document.form2.list(i).value; //form2是<form>的名稱
}

JS實(shí)現(xiàn)代碼：

‍‍<select id="pid" onchange="gradeChange()">
  <option grade="1" value="a">選項(xiàng)一</a>
  <option grade="2" value="b">選項(xiàng)二</a>
</select>
<script type="text/JavaScript">
    function gradeChange(){
    var objS = document.getElementById("pid");
    var grade = objS.options[objS.selectedIndex].grade;
    alert(grade);
    }
</script>

jQuery實(shí)現(xiàn)代碼：

<select name="myselect" id="myselect">
  <option value="opt1">選項(xiàng)1</option>
  <option value="opt2">選項(xiàng)2</option>
  <option value="opt3">選項(xiàng)3</option>
</select>
$("#myselect").change(function(){
  var opt=$("#myselect").val();
  ...
});

Javascript獲取select下拉框選中的值

現(xiàn)在有一id=test的下拉框，怎么拿到選中的那個(gè)值呢？

分別使用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. 拿到選中項(xiàng)的索引：

var index=myselect.selectedIndex;
// selectedIndex代表的是你所選中項(xiàng)的index

3. 拿到選中項(xiàng)options的value：

myselect.options[index].value;

4:拿到選中項(xiàng)options的text：

myselect.options[index].text;

二、jquery方法（前提是已經(jīng)加載了jquery庫）

1.獲取選中的項(xiàng)

var options=$("#test option:selected");

2.拿到選中項(xiàng)的值

alert(options.val());

3.拿到選中項(xiàng)的文本

alert(options.text());

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript操作DOM技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

JS實(shí)現(xiàn)select選中option觸發(fā)事件操作示例

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具