Javascript 数据和HTML下拉列表

因此，我尝试使用Javascript/Jquery填充HTML下拉列表。我希望每个

标记都有一些与之相关的数据，比如searchPurpose、searchTime、startDate、endDate。然后我有两个问题-

我应该如何关联这些数据-通过数据标记，还是通过其他方式

当我的用户点击某个选项后，我如何访问该数据

---

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

然后像这样把它分开：

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;
}

---

在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>

使用jQuery时，请使用：

。

---

（jQuery）。

有很多方法可以将数据与

选项

标记相关联。我脑海中浮现出一些想法：

• 使用隐藏输入：

  选项1

• 使用

  数据-

  属性（并非所有浏览器都支持）：

  选项1

• 如果您使用的是jQuery，那么可以使用：

  $（'#option1'）.data（'searchPurpose'，'data…'）

至于访问数据，这取决于您使用下拉列表所做的操作。如果它们是以表单形式提交的，您可以使用一些

onSubmit

JavaScript来a返回false，然后b）使用

post

或

get

提交表单并附加额外数据。 （对于隐藏的输入解决方案，不需要JavaScript干预。）

---

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

您是使用JQuery，还是严格使用Javascript？

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

<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>

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

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