基于下拉选择框修改隐藏字段Value值的JS实现需求

实现思路 #

因为无法编辑表单HTML，我们可以用原生JavaScript监听下拉框的change事件，根据选中的选项内容更新隐藏输入框Price的值。

代码实现 #

基础版本（按选项文本判断）

// 获取目标元素
const playerDropdown = document.getElementById('how_many_players');
const priceField = document.getElementById('Price');

// 监听下拉框选择变化
playerDropdown.addEventListener('change', function() {
  // 获取当前选中的选项文本
  const selectedText = this.options[this.selectedIndex].text;

  // 根据选项设置对应价格
  if (selectedText === '1 to 10') {
    priceField.value = '$100';
  } else if (selectedText === '11 to 20') { // 可按需扩展更多选项
    priceField.value = '$180';
  } else {
    // 默认回到初始值
    priceField.value = '$0.00';
  }
});

更易维护的版本（用映射对象）

如果需要添加多个选项，用对象映射价格会更清晰，也方便后续修改：

const playerDropdown = document.getElementById('how_many_players');
const priceField = document.getElementById('Price');

// 定义选项文本与价格的映射关系
const priceMapping = {
  '1 to 10': '$100',
  '11 to 20': '$180',
  '21 to 30': '$250',
  '30+': '$300'
};

playerDropdown.addEventListener('change', function() {
  const selectedText = this.options[this.selectedIndex].text;
  // 从映射中取价格，没有匹配项则用默认值
  priceField.value = priceMapping[selectedText] || '$0.00';
});

注意事项 #

• 如果下拉选项有设置value属性（比如<option value="1-10">1 to 10</option>），建议改用this.value来判断，比选项文本更稳定（文本可能被修改，而value一般不会）：

  // 示例：按value判断
  const priceMapping = {
    '1-10': '$100',
    '11-20': '$180'
  };
  
  playerDropdown.addEventListener('change', function() {
    priceField.value = priceMapping[this.value] || '$0.00';
  });
  

• 把这段代码添加到落地页构建器的自定义JavaScript区域（通常在页面设置或表单设置里能找到，建议放在页面底部加载，确保元素已渲染）。

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