數據和HTML下拉列表

Question

所以我想使用Javascript/Jquery填充HTML下拉列表。我希望每個<option>標記都具有一些與之關聯的數據，例如searchPurpose，searchTime，startDate，endDate。然後我有兩個問題 -

1. 我應該如何關聯數據 - 通過數據標記或通過其他方式？
2. 我的用戶點擊某個選項後，如何訪問該數據？

感謝

Answer 1

有了HTML5，data-*屬性是肯定要走的路。假設你有以下幾點：

<select id="ddl"> 
    <option data-start-date="25-08-2012" value="1">A</option> 
    <option data-start-date="25-08-2013" value="1">B</option> 
</select> 

要使用普通的JavaScript應用訪問自己的價值：

selectedOption.getAttribute("data-start-date"); 

使用jQuery使用data()：

$("#ddl").on('change', function() { 
    var selectedOption = this.options[this.selectedIndex]; 
    alert($(selectedOption).data("start-date")); 
}); 

DEMO。 DEMO（jQuery）。

Answer 2

你使用jQuery？如果是這樣，您可能需要使用內置的數據模塊。 如果不是，請使用數據標籤。我建議將所有數據放在一個數據標籤中。 即

data="searchPurpose: thing, searchTime: sometime" 

而且這樣的分離：

function data(elem) { 
    var data = {}; 
    var a = elem.getAttribute('data').split(','); 
    var i = 0; 
    while(i < a.length){ 
     data[a[i].split(':')[0]] = a[i].split(':')[1]; 
     i++; 
    } 
    return data; 
} 

所以：

data() returns an object literal like this: { searchPurpose: 'thing', searchTime: 'sometime' } 

Answer 3

有很多方法可以將數據與option標籤相關聯。

• 採用隱藏式輸入：<option id="option1">Option 1</option><input type="hidden" id="option1data" value="option1 data here" />
• 使用data-屬性（並非所有瀏覽器都支持）：<option id="option1" data-searchPurpose="searchPurpose">Option 1</option>
• 如果你使用jQuery，您可以使用its .data() method了我的頭頂部的一些想法：$('#option1').data('searchPurpose', 'data...');

就訪問數據而言，這取決於您對下拉菜單所做的操作。如果他們的形式提交，你可以使用一些onSubmit JavaScript來一）返回false 然後B）提交使用post或get與附加額外的數據形式。 （在隱藏輸入解決方案的情況下，這種JavaScript干預將不是必需的。）

否則使用Javascript訪問/修改數據應該非常簡單。