Instructions for initialising the dropdown box & 下拉框初始化使用说明

English Instructions

The following code snippet is used to initialize a dropdown (select element) on a webpage and populate it with data fetched from the server via an AJAX request.

Dropdown box data setting instructions

Before using the dropdown, you need to add the type of data you want to display in the dropdown to the settings page. For example, if you want to add pool types, you would add the following data:

| Category  | Key  | Value   | Display Text |
| --------- | ---- | ------- | ------------ |
| pool_type | 1    | indoor  | Indoor      |
| pool_type | 2    | outdoor | Outdoor     |

These data entries will be used to populate the options of the dropdown.

How to Use

1. Call the populateSelect function with three arguments:

   • selector: The selector for the dropdown you want to initialize, e.g., '#pool_type'.

   • category: The category of data being requested, which will be used as part of the URL, e.g., 'pool_type'.

   • includeEmpty: Whether to include an empty option in the dropdown. This argument is optional and defaults to false.

2. Define the dropdown in HTML, ensuring that the id matches the selector passed to the populateSelect function.

Sample Code

<!-- Dropdown Definition -->
<div class="form-group">
    <label for="pool_type">Pool Type:</label>
    <select id="pool_type" name="pool_type" class="form-select" required>
        <!-- Options will be dynamically populated via JavaScript -->
    </select>
</div>
​
<script>
// Call the function to initialize the dropdown
populateSelect('#pool_type', 'pool_type', true);
</script>

Advanced Feature

The dropdown now supports an advanced feature that allows you to pass a table name as an additional parameter. This is particularly useful if your dropdown data needs to be queried from a specific table in the database.

Instructions for Advanced Dropdown Data

To utilize this advanced feature, simply include the table name as the fourth argument when calling the populateSelect function. This table name will be used to fetch the relevant data for the dropdown options.

How to Use with Table Name

1. Call the populateSelect function with four arguments:

   • selector: The selector for the dropdown you want to initialize, e.g., '#pool_id'.

   • category: The category of data being requested, which will be used as part of the URL, e.g., 'pool_id'.

   • includeEmpty: Whether to include an empty option in the dropdown. This argument is optional and defaults to false.

   • tableName: The name of the table from which to query the data, e.g., 'pool'.

2. Define the dropdown in HTML, ensuring that the id matches the selector passed to the populateSelect function.

Sample Code with Table Name

<!-- Dropdown Definition with Table Name -->
<div class="form-group">
    <label for="pool_id">Pool ID:</label>
    <select id="pool_id" name="pool_id" class="form-select" required>
        <!-- Options will be dynamically populated via JavaScript -->
    </select>
</div>
​
<script>
// Call the function to initialize the dropdown with table name
populateSelect('#pool_id', 'pool_id', true, 'pool');
</script>

中文说明

本段代码用于初始化页面上的下拉框，并通过 AJAX 请求从服务器获取数据填充到下拉框中。

下拉框数据设置说明

在使用下拉框之前，需要在设置界面添加您想要在下拉框中显示的类型数据。例如，如果您想要添加泳池类型，您需要添加如下数据：

| 类别      | 键   | 值      | 显示文本 |
| --------- | ---- | ------- | -------- |
| pool_type | 1    | indoor  | 室内    |
| pool_type | 2    | outdoor | 室外     |

这些数据将被用来填充下拉框的选项。

使用方法

1. 调用 populateSelect 函数，传入三个参数：

   • selector：要初始化的下拉框的选择器，例如 '#pool_type'。

   • category：要请求的数据类别，它将被用作 URL 的一部分，例如 'pool_type'。

   • includeEmpty：是否在下拉框中包含一个空选项。这个参数是可选的，默认值为 false。

2. 在 HTML 中定义下拉框，确保 id 与传递给 populateSelect 函数的选择器匹配。

示例代码

<!-- 下拉框定义 -->
<div class="form-group">
    <label for="pool_type">泳池类型:</label>
    <select id="pool_type" name="pool_type" class="form-select" required>
        <!-- 这里将通过 JavaScript 动态填充选项 -->
    </select>
</div>
​
<script>
// 调用函数初始化下拉框
populateSelect('#pool_type', 'pool_type', true);
</script>

高级功能

下拉框现在支持一个高级功能，允许您传入一个表名作为额外参数。当您的下拉数据需要从数据库中的特定表查询时，这个功能特别有用。

高级下拉框数据设置说明

要使用这个高级功能，只需在调用 populateSelect 函数时，将表名作为第四个参数包含进去。这个表名将被用来获取下拉框选项的相关数据。

带有表名的使用方法

1. 调用 populateSelect 函数，传入四个参数：

   • selector：要初始化的下拉框的选择器，例如 '#pool_id'。

   • category：要请求的数据类别，它将被用作 URL 的一部分，例如 'pool_id'。

   • includeEmpty：是否在下拉框中包含一个空选项。这个参数是可选的，默认值为 false。

   • tableName：要查询数据的表名，例如 'pool'。

2. 在 HTML 中定义下拉框，确保 id 与传递给 populateSelect 函数的选择器匹配。

带有表名的示例代码

<!-- 带有表名的下拉框定义 -->
<div class="form-group">
    <label for="pool_id">泳池 ID:</label>
    <select id="pool_id" name="pool_id" class="form-select" required>
        <!-- 这里将通过 JavaScript 动态填充选项 -->
    </select>
</div>
​
<script>
// 调用函数用表名初始化下拉框
populateSelect('#pool_id', 'pool_id', true, 'pool');
</script>

​​​​​​​