下拉框选择表里的名称 jQuery

原创

mob64ca12e2ba6f 2024-01-21 10:04:25 ©著作权

文章标签 下拉框 jQuery Data 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12e2ba6f的原创作品，请联系作者获取转载授权，否则将追究法律责任

下拉框选择表里的名称 jQuery

在Web开发中，下拉框是一种常见的交互组件，用户可以通过下拉框选择表中的某个名称。本文将介绍如何使用jQuery实现下拉框选择表里的名称，并提供相应的代码示例。

1. HTML结构

首先，我们需要在HTML中添加一个下拉框和一个表格，用于展示可选的名称和对应的数据。

<select id="nameSelect">
  <option value="name1">Name 1</option>
  <option value="name2">Name 2</option>
  <option value="name3">Name 3</option>
</select>

<table id="dataTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Data</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Name 1</td>
      <td>Data 1</td>
    </tr>
    <tr>
      <td>Name 2</td>
      <td>Data 2</td>
    </tr>
    <tr>
      <td>Name 3</td>
      <td>Data 3</td>
    </tr>
  </tbody>
</table>

上述代码中，通过<select>标签创建了一个下拉框，每个<option>标签代表一个可选的名称。<table>标签用来展示名称和对应的数据，其中<thead>标签定义表格的表头，<tbody>标签定义表格的主体。

2. jQuery代码

接下来，我们使用jQuery来实现下拉框选择表里的名称的功能。当用户选择某个名称时，我们将根据选中的名称来显示对应的数据。

$(document).ready(function() {
  $('#nameSelect').change(function() {
    var selectedName = $(this).val();
    $('#dataTable tbody tr').hide();
    $('#dataTable tbody td:contains("' + selectedName + '")').parent().show();
  });
});

上述代码使用了jQuery的change事件和选择器来实现下拉框选择的功能。当下拉框的选择发生改变时，触发change事件的回调函数。回调函数中，我们首先获取选中的名称(selectedName)，然后隐藏表格中所有的行($('#dataTable tbody tr').hide())，最后显示包含选中名称的行($('#dataTable tbody td:contains("' + selectedName + '")').parent().show())。

3. 完整示例

下面是完整的示例代码，包括HTML结构和jQuery代码：

<!DOCTYPE html>
<html>
<head>
  <title>Dropdown Select with jQuery</title>
  <script src="
  <script>
    $(document).ready(function() {
      $('#nameSelect').change(function() {
        var selectedName = $(this).val();
        $('#dataTable tbody tr').hide();
        $('#dataTable tbody td:contains("' + selectedName + '")').parent().show();
      });
    });
  </script>
</head>
<body>
  <select id="nameSelect">
    <option value="name1">Name 1</option>
    <option value="name2">Name 2</option>
    <option value="name3">Name 3</option>
  </select>

  <table id="dataTable">
    <thead>
      <tr>
        <th>Name</th>
        <th>Data</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Name 1</td>
        <td>Data 1</td>
      </tr>
      <tr>
        <td>Name 2</td>
        <td>Data 2</td>
      </tr>
      <tr>
        <td>Name 3</td>
        <td>Data 3</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

在上述示例中，我们引入了jQuery库，并将jQuery代码放在<script>标签中。通过运行上述代码，我们可以看到下拉框选择某个名称后，对应的数据会显示在表格中。