添加一个新的div on button click and option以选择一个选项以显示文本框

在前端开发中，可以通过以下步骤来实现在按钮点击和选项选择时添加新的div和显示文本框：

HTML结构：首先，在HTML中创建一个按钮和一个选择框，用于触发添加新的div和选择选项。同时，创建一个容器div，用于包裹所有动态添加的div。

<button id="addButton">添加新的div</button>
<select id="optionSelect">
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
</select>
<div id="container"></div>

JavaScript逻辑：使用JavaScript来监听按钮点击事件和选项选择事件，并在事件触发时执行相应的操作。

// 获取按钮和选择框元素
const addButton = document.getElementById("addButton");
const optionSelect = document.getElementById("optionSelect");
// 获取容器元素
const container = document.getElementById("container");

// 监听按钮点击事件
addButton.addEventListener("click", function() {
  // 创建新的div元素
  const newDiv = document.createElement("div");
  // 添加文本框元素
  const newTextBox = document.createElement("input");
  newTextBox.type = "text";
  // 将文本框添加到新的div中
  newDiv.appendChild(newTextBox);
  // 将新的div添加到容器中
  container.appendChild(newDiv);
});

// 监听选项选择事件
optionSelect.addEventListener("change", function() {
  // 获取选中的选项值
  const selectedOption = optionSelect.value;
  // 根据选项值执行相应操作
  switch (selectedOption) {
    case "1":
      // 执行选项1的操作
      break;
    case "2":
      // 执行选项2的操作
      break;
    case "3":
      // 执行选项3的操作
      break;
    default:
      // 默认操作
      break;
  }
});

以上代码实现了在按钮点击和选项选择时添加新的div和显示文本框的功能。你可以根据具体需求在相应的操作中添加你想要的逻辑。

请注意，由于要求不能提及具体的云计算品牌商，因此无法提供腾讯云相关产品和产品介绍链接地址。如需了解相关产品信息，建议访问腾讯云官方网站进行查询。