表白：黑白圣堂血天使，天劍鬼刀阿修羅。 
講解對象：/click元素select會失效 怎么回事？document.querySelectorAll('select#categoryHistoryId')[0].click()
作者：融水公子 rsgz
===

今天來探究一個新的問題，為什么document.querySelectorAll('select#categoryHistoryId');都已經(jīng)找到了對應(yīng)的select元素了

為什么后面模擬點擊click()會出現(xiàn)失效的情況呢

document.querySelectorAll('select#categoryHistoryId')[0].click()

其實上面的寫法對于select標(biāo)簽是不行的。其實大家點擊這個select標(biāo)簽只是想顯示下面的子選項 然后點擊選中子選項？如果你是這個需求的話 其實可以直接跳過去，直接設(shè)置option value的值

比如這是源碼，你想要選中下面的這個子選項

<option value="6048" data-default="0" data-update="undefined">Dresses(連衣裙)</option>

那么我們可以這么寫 能選中你想要的子選項了var selectElement = document.querySelector('select#categoryHistoryId');

selectElement.value = '6048'; // 設(shè)置選中的值

換句話說 如果你僅僅是模擬點擊 那么觸發(fā)點擊事件就可以了

var selectElement = document.querySelector('select#categoryHistoryId');
var clickEvent = new MouseEvent('click', {
  bubbles: true,
  cancelable: true,
  view: window
});
selectElement.dispatchEvent(clickEvent);

=== 

公眾號：不浪仙人

謝謝大家的支持！可以點擊我的頭像，進(jìn)入我的空間瀏覽更多文章呢。建議大家360doc[www.ahfyzs.com]注冊一個賬號登錄，里面真的有很多優(yōu)秀的文章，歡迎大家的到來。
---