数据和HTML下拉列表

Data and HTML Dropdown

本文关键字：下拉列表 HTML 数据      更新时间：2023-09-26

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

  1. 我应该如何通过数据标记或其他方式关联这些数据
  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"));
});

演示。DEMO（jQuery）。

您在使用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' }

有很多方法可以将数据与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...');

至于访问数据，这取决于你对下拉列表做了什么。如果它们是以表单形式提交的，您可以使用一些onSubmit JavaScripta）返回false，然后b）

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

相关文章：