的jQuery選擇選項單擊處理

給出：的jQuery選擇選項單擊處理

<select id="mySelect"> 
    <option>..</option> 
    ... 
</select>

使用SELECT ID，我怎麼能觸發的選項之一點擊事件？我嘗試將事件直接附加到select，但是這會在點擊選擇時觸發事件（即使沒有選項）。哦，這是一個多選（雖然我不認爲這件事）。

來源

2011-04-21 john

回答得好需要更改事件前的值時http://stackoverflow.com/questions/4076770/getting-value-of-select -dropdown-before-change – malkoty 2014-10-09 16:48:43

你想'改變'事件處理程序，而不是'點擊'。

$('#mySelect').change(function(){ 
    var value = $(this).val(); 
});

來源

2011-04-21 20:49:06 Matt

+15

如果他們選擇相同的選項，該怎麼辦？不會觸發更改事件 – haz0rd 2013-09-26 21:03:22

@ haz0rd只有通過單擊事件才能檢測到該事件，其中第一次單擊該選擇時將得到2. 1，而當您選擇已選擇的選項時，將獲得1 1 – Matt 2013-09-27 01:13:34

+11

請注意'點擊'事件目前*不會*在Chrome中根據'

-2

我在這種情況下所做的是，我把在選項元素OnClick事件是這樣的：

<option onClick="something();">Option Name</option>

然後，只需創建一個腳本函數是這樣的：

function something(){ 
    alert("Hello"); 
    }

更新：很抱歉，我無法發表評論，因此我在這裏更新
TrueBlueAussie顯然的jsfiddle是有一些問題，檢查這裏是否可行與否：http://js.do/code/klm

來源

2013-04-23 01:42:44

這不*當前*與Chrome一起工作，所以應該避免：http://jsfiddle.net/TrueBlueAussie/jd3bamtr/1/ – 2015-02-19 09:27:14

TrueBlueAussie，jsfiddle有問題，請點擊此處：http://js.do/code/ klm – 2015-02-19 14:04:15

ps你的代碼缺少javascript代碼，所以....下次至少確保你已經實現了某些人的建議，並通過「Chromes」調試器進行檢查，發現它不工作，爲什麼!!在警告其他用戶之前！它不工作和downvoting;） – 2015-02-19 14:07:56

您可以附加一個焦點事件選擇

$('#select_id').focus(function() { 
    console.log('Handler for .focus() called.'); 
});

來源

2013-06-10 00:04:22 tbradley22

使用chrome。我不認爲這有效...... – 2017-06-29 22:10:43

-2

一個可能的解決方案是將類添加到每選項

<select name="export_type" id="export_type"> 
    <option class="export_option" value="pdf">PDF</option> 
    <option class="export_option" value="xlsx">Excel</option> 
    <option class="export_option" value="docx">DocX</option> 
</select>

，然後使用單擊處理該類

$(document).ready(function() { 

    $(".export_option").click(function (e) { 
     //alert('click'); 
    }); 

});

更新：它看起來像代碼在FF，IE和Opera的作品，但不是在Chrome中。看規格http://www.w3.org/TR/html401/interact/forms.html#h-17.6我會說這是Chrome中的錯誤。

來源

2014-06-24 08:22:48 VladL

@TrueBlueAussie剛剛在FF和IE中測試過你的小提琴，它的工作原理如預計 – VladL 2015-02-18 19:30:04

@TrueBlueAussie，甚至在舊的好Opera 12中它也可以工作！ – VladL 2015-02-18 19:31:06

@TrueBlueAussie我明白，你已經測試過它只是在鉻，我除了鉻以外的其他地方進行測試。否則，你應該寫「它在crome中不起作用」而不是「點擊事件被下拉菜單吃掉」，這顯然是不正確的。看到我的更新 – VladL 2015-02-19 07:17:53

$('#mySelect').on('change', function() { 
 
    var value = $(this).val(); 
 
    alert(value); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> 
 
<select id="mySelect"> 
 
    <option value='1'>1</option> 
 
    <option value='2'>2</option> 
 
    <option value='3'>3</option> 
 
    <option value='4'>4</option> 
 
    <option value='5'>5</option> 
 
    <option value='6'>6</option> 
 
    <option value='7'>7</option> 
 
    <option value='8'>8</option> 
 
</select>

EXAMPLE

這裏

來源

2015-02-19 07:24:41 Zombyii

var value = this.value也適用於此。無需包裝在jquery選擇器中 – 2018-01-23 15:26:53

的jQuery選擇選項單擊處理

回答

相關問題