在 Squarespace 中显示/隐藏表单字段

如何解决在 Squarespace 中显示/隐藏表单字段

我试图根据在下拉菜单中选择的值在 Squarespace 表单中显示/隐藏表单字段。下拉菜单包含 1-10 的值列表。目的是为从下拉菜单中选择的每个数字显示 2 个表单字段。对于值 1，我希望始终显示标题为“序列号”和“确认序列号”的表单字段。对于值 2，我想显示“序列号 2”和“确认序列号 2”。值 3-10 依此类推。

这是表格的屏幕截图，因为它现在显示了所有内容。 enter image description here

解决方法

您可以使用 document.getElementById(`serial-input-${index}`)

获取串行元素

您可以使用 document.getElementById(`serial-input-confirm-${index}`)

获取串行确认元素

<p>Number of products</p>
<select id="select" onChange="create.input()"></select>
<div id="input"></div>

const create = {
  select: () => {
        let select = document.getElementById('select')
    // Create 1-10 number of products
    new Array(10).fill(0).forEach((x,i) => {
      let option = document.createElement('option')
      option.innerHTML = (i+1)
      option.value = (i+1)
      select.appendChild(option)
    })
  },input: () => {
    let input  = document.getElementById('input')
    let select = document.getElementById('select')
    console.log(select.value)
    // Remove all child
    input.innerHTML = ''
    // Create the same number of input has you select in select ...
    const size = parseInt(select.value,10)
        new Array(size).fill(0).forEach((x,i) => {
      console.log(i)
      let p_input = create.p_input(i)
      p_input.forEach(x => input.appendChild(x))
    })    
  },p_input: index => {
    let name = `erial number` + (index > 0 ? ' ' + (index+1) : '')
    
    let serial_p = document.createElement('p')
    serial_p.innerHTML = 'S' + name
    serial_p.id = 'p-serial-' + index
    serial_p.class = 'p-serial'
    
    let serial_p_confirm = document.createElement('p')
    serial_p_confirm.innerHTML = 'Confirm s' + name
    serial_p_confirm.id = 'pc-serial-' + index
    serial_p_confirm.class =  'pc-serial'

        let serial_input         = document.createElement('input')
    serial_input.type = "text"
    serial_input.id   = "serial-input-" + index
    serial_input.class =  'serial-input'

    let serial_input_confirm = document.createElement('input')
    serial_input_confirm.type = "text"
    serial_input_confirm.id   = "serial-input-confirm-" + index
    serial_input_confirm.class =  'serial-input'
    
    return [serial_p,serial_input,serial_p_confirm,serial_input_confirm]
  }
}
create.select()
create.input()

例如这里是我点击 5 时得到的结果。