使用JS和HTML预存变量并回显至文本框；实现按钮点击自动填充

嘿，我来帮你搞定这两个问题，一步步来：

1. 存储预定义变量并在文本框中显示 #

这里有两种实用的方式，你可以根据场景选择：

方式一：直接在JS中定义变量，赋值给文本框 #

这种方式适合变量已经在JS里预定义好的情况：

<!-- HTML部分：文本框 -->
<input type="text" id="myTextbox">

<script>
// 预定义变量（可以是固定值，也可以是模板渲染的内容比如{{ product.title }}）
const predefinedValue = "我的预定义内容";
// 获取文本框元素
const textbox = document.getElementById('myTextbox');
// 把变量值放到文本框里
textbox.value = predefinedValue;
</script>

方式二：用HTML的data属性存储变量，再通过JS读取 #

如果变量需要和HTML元素绑定，用data属性更直观：

<!-- HTML部分：把预定义值存在data属性里 -->
<input type="text" id="myTextbox" data-predefined="从data属性读取的内容">

<script>
const textbox = document.getElementById('myTextbox');
// 读取data属性的值
const storedValue = textbox.dataset.predefined;
// 赋值给文本框
textbox.value = storedValue;
</script>

2. 点击按钮自动填充值到文本框（含下拉框选中逻辑） #

我看到你提供了一段下拉框的代码，不过有点不完整，我帮你补全并整合按钮点击的功能：

首先是HTML结构（假设你的页面是这样的）：

<!-- 产品下拉框 -->
<select id="ContactFormProduct">
  <option value="1">产品A</option>
  <option value="2">产品B</option>
  <option value="3">产品C</option>
</select>

<!-- 需要填充的文本框 -->
<input type="text" id="targetTextbox">

<!-- 触发填充的按钮 -->
<button id="fillBtn">填充内容</button>

然后是JavaScript代码：

// 预定义的目标产品标题（比如来自模板的{{ product.title }}）
const textToFind = "{{ product.title }}";

// 获取页面元素
const productDropdown = document.getElementById('ContactFormProduct');
const targetTextbox = document.getElementById('targetTextbox');
const fillBtn = document.getElementById('fillBtn');

// 给按钮绑定点击事件
fillBtn.addEventListener('click', function() {
  // 遍历下拉框的所有选项
  for (let i = 0; i < productDropdown.options.length; i++) {
    // 找到文本匹配的选项
    if (productDropdown.options[i].text === textToFind) {
      // 选中该选项
      productDropdown.selectedIndex = i;
      // 同时把选中的内容填充到文本框（这里用选项文本，你也可以换成value）
      targetTextbox.value = productDropdown.options[i].text;
      // 找到后就停止遍历，提升效率
      break;
    }
  }
});

解释一下：点击按钮后，代码会自动在下拉框里找到和textToFind匹配的选项并选中，同时把对应内容填充到文本框里。另外你原来的代码少了闭合的}，我已经补全了，避免语法错误哦。

内容的提问来源于stack exchange，提问作者jigyasa