如何從javascript中的動態下拉菜單中獲取選定的值

我試圖從動態填充下拉列表的div元素中獲取選定的值。這是在現有的網站上，所以我們使用額外的JavaScript來添加偵聽器到div。以附件代碼爲例。當我點擊「紅色的」區域時，我只能看到部分html。理想情況下，我需要整個文本「紅鞋」，我只有點擊「鋤頭」區域才能看到。如何獲取點擊的li元素的全部文本？如何從javascript中的動態下拉菜單中獲取選定的值

例如：

function getEventTarget(e) { 
 
    e = e || window.event; 
 
    return e.target || e.srcElement; 
 
} 
 

 
var ul = document.getElementById('search_suggestion'); 
 
ul.onclick = function(event) { 
 
    var target = getEventTarget(event); 
 
    alert(target.innerHTML); 
 
};

<div id="search_suggestion"> 
 
    <ul class="suggestion_keyword"> 
 
    <li><span class="keywords">red s</span>kirt 
 
     <div class="brm-autosuggest-nub"></div></li>  
 
    <li><span class="keywords">red s</span>horts</li> 
 
    <li><span class="keywords">red s</span>hoes</li> 
 
    <li><span class="keywords">red s</span>hirt</li>    
 
    </ul> 
 
</div>

來源

2016-08-05 sururu74

的可能的複製[如何得到div標籤的使用只有JavaScript（jQuery的無）文本（http://stackoverflow.com/questions/10370204/how-can- get-the-text-of-a-div-tag-using-only-javascript-no-jquery） –

@TommyLee這個問題還有另外一部分。 EventTarget並不總是李。 – Mic

相反的innerHTML，請嘗試使用textContent

ul.onclick = function(event) { 
    var target = getEventTarget(event); 
    alert(target.textContent); 
};

來源

2016-08-05 01:02:56

你可以試試innerText而不是innerHTML：

ul.onclick = function(event) { 
    var target = getEventTarget(event); 
    alert(target.innerText); 
};

來源

2016-08-05 01:05:37

編輯使用jQuery

$('li').on('click',function() { 
 
    alert($(this).text()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="search_suggestion"> 
 
    <ul class="suggestion_keyword"> 
 
    <li><span class="keywords">red s</span>kirt<div class="brm-autosuggest-nub"></div></li>  <li><span class="keywords">red s</span>horts</li> 
 
    <li><span class="keywords">red s</span>hoes</li> 
 
    <li><span class="keywords">red s</span>hirt</li>    
 
    </ul> 
 
</div>

來源

2016-08-05 01:07:58

如果您單擊任何「紅色」文本，則不起作用。 – Owen

立即嘗試使用此代碼，我添加了一些jQuery –

@AleksandarĐokić我可以驗證，現在看起來工作正如OP所要求的。然而，我會說這個問題沒有被標記爲jQuery，OP也沒有表明它現在可用。爲小任務添加另一個第三方依賴關係，如果沒有它，很容易完成，似乎是一個不好的建議。 – Mic

兩個部分，以您的問題：第一，我看到的點擊事件的目標是跨度，而不是李。其次，正如其他人所指出的那樣，您將文本和HTML混合在一起。您需要全文內容，不包括標記。 innerText或textContent都可以工作 - 但textContent會保留換行符。這是一個工作片段。

function getEventTarget(e) { 
 
    e = e || window.event; 
 
    return e.target || e.srcElement; 
 
} 
 

 
var ul = document.getElementById('search_suggestion'); 
 
ul.onclick = function(event) { 
 
    var target = getEventTarget(event); 
 
    if(target.tagName === 'SPAN') 
 
    target = target.parentNode; 
 
    alert(target.textContent); 
 
};

<div id="search_suggestion"> 
 
    <ul class="suggestion_keyword"> 
 
    <li><span class="keywords">red s</span>kirt<div class="brm-autosuggest-nub"></div></li>  <li><span class="keywords">red s</span>horts</li> 
 
    <li><span class="keywords">red s</span>hoes</li> 
 
    <li><span class="keywords">red s</span>hirt</li>    
 
    </ul> 
 
</div>

來源

2016-08-05 01:09:12 Mic

如何從javascript中的動態下拉菜單中獲取選定的值

回答

相關問題