如何獲得在JavaScript中datalist中選擇的數據的值？

我想在javascript中獲取datalist中所選項目的值。當我正在處理流星時，我需要獲取datalist中所選數據的值。如何獲得在JavaScript中datalist中選擇的數據的值？

我的代碼是：

<input type="text" list="d1" id="search" name="browser" placeholder="Search By"> 
<datalist id="d1"> 
    {{#each searched_item}} 
     <option value={{this}}>{{this}}\</option> 
    {{/each}} 
</datalist>

這是我的代碼在我的模板，我用我的流星形式。這裏的searched_item是我在流星裏的js文件裏面輔助函數中調用的函數。現在我需要在javascript中獲取datalist中所選項目的值。

在此先感謝..

來源

2017-03-25 Coder

你使用的是jQuery嗎？ –

如果我在Jquery或Javascript中獲得答案，它對我很好。 – Coder

你需要在你的模板來處理表單提交創建一個事件處理程序。然後使用事件對象從數據列表中獲取值。

記住一個datalist只是提供了一個文本輸入的自動完成功能。所以你只需要在表單中獲得文本輸入的值。由於您希望在選擇數據列表後立即獲取該值，則可以使用input事件。

這裏是一個例子。只需將myTemplate更改爲您的模板名稱即可。

Template.myTemplate.events({ 
    'input #search'(event) { 
    // get value for text input 
    const value = event.currentTarget.value; 

    // do something with value 
    }, 
});

看看這個meteor tutorial瞭解更多關於表單處理。

來源

2017-03-25 20:59:42 jordanwillis

感謝您的幫助，但不工作。只要數據被選中，我不想點擊任何按鈕就想獲得價值。有關更多幫助，請參閱我的事件處理代碼：''change #search'：function（event，template）d = $（event.currentTarget）.val（）; console.log（d）;' – Coder

感謝您的澄清。我更新了相應的答案。你可以使用輸入事件喲做到這一點。 – jordanwillis

哇，它的工作!!!!!!!!!!!!!!!!!!!。我得到了我真正想要的...... Ty先生，非常非常。從過去的3天起，我真的被這個問題困住了。最後我明白了。我只是將我的「改變」改爲「輸入」，而且工作。再次Ty：D !!!! – Coder

如何獲得在JavaScript中datalist中選擇的數據的值？

回答

相關問題