javascript - 数据和 HTML 下拉菜单

Question

所以我正在尝试使用 Javascript/Jquery 填充 HTML 下拉列表。我希望每个<option>标签都有一些与之关联的数据，比如 searchPurpose、searchTime、startDate、endDate。然后我有两个问题-

1. 我应该如何关联这些数据 - 通过数据标签或其他方式？
2. 一旦我的用户点击了某个选项，我如何访问该数据？

谢谢

Answer 1

你在使用 jQuery 吗？如果是这样，您可能需要使用内置数据模块。如果没有，请使用数据标签。我建议将所有数据放在一个数据标签中。IE

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 2

使用 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"));
});

演示。 演示（jQuery）。

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，你可以使用它的 .data() 方法：$('#option1').data('searchPurpose', 'data...');

就访问数据而言，这取决于您对下拉列表的操作。如果它们以表单的形式提交，您可以使用一些onSubmitJavaScript a)返回 false ，然后 b)post使用附加的额外数据或get附加数据提交表单。（在隐藏输入解决方案的情况下，不需要这种 JavaScript 干预。）

否则，使用 Javascript 访问/修改数据应该非常简单。