js如何根据下拉款不同的值显示不同的文本框

使用 JavaScript 编写一个下拉框，可以根据用户输入的值自动显示不同的文本框，是一种非常实用的功能。下面是一个示例代码，它使用了一个表单元素，当用户点击“查看数据”按钮时，会弹出一个下拉框，让用户选择不同的数据类型，然后根据用户的选择显示相应的文本框。

首先，我们需要创建一个表单元素，并添加一个“查看数据”的按钮。在代码中，我们将使用 HTML 的“input”元素和“select”元素来实现这个功能。

```

数据类型：

option 1

option 2

option 3

```

在这个示例中，我们将为“数据类型”选择器添加三个选项。当用户点击“查看数据”按钮时，JavaScript 代码将执行，根据用户的选择显示不同的文本框。

接下来，我们将编写 JavaScript 代码，用于根据用户的选择显示不同的文本框。我们可以使用 HTML 元素的“data-type”属性来获取用户选择的数据类型，然后根据这个值创建一个对应的文本框。

```

const dataType = document.getElementById('data-type').value;

const option1Text = document.createElement('div');

option1Text.textContent = '选择数据类型1';

document.body.appendChild(option1Text);

const option2Text = document.createElement('div');

option2Text.textContent = '选择数据类型2';

document.body.appendChild(option2Text);

const option3Text = document.createElement('div');

option3Text.textContent = '选择数据类型3';

document.body.appendChild(option3Text);

```

在这个示例中，我们首先使用 `document.getElementById()` 方法来获取“数据类型”选择器对应的文本框。然后，我们使用 `createElement()` 方法创建一个文本框，并将它的文本设置为选择器中对应的选项的文本。最后，我们将文本框添加到页面中。

当用户点击“查看数据”按钮时，JavaScript 代码将重新渲染页面，并根据用户的选择显示不同的文本框。

总的来说，使用 JavaScript 编写一个下拉框，可以根据用户输入的值自动显示不同的文本框是一种非常实用的功能。通过这个示例，我们可以看到如何使用 HTML 和 JavaScript 来实现这个功能，并了解如何使用它们来创建具有自动显示文本框功能的下拉框。