Question

我正在创建在线表单，并且在表单中，我有一个文本（数字）字段和一个带有多个选项的下拉列表。当文本字段的值小于零时，我需要显示其中一些选项；当文本字段的值大于0时，我需要显示其他选项。

有人知道如何使用JS吗？（后端无数据库）。

感谢您的帮助！

此任务我只能使用js（jquery）+ css。

示例：

<form id="test" name="test" target="_self">
    <input id="text" name="text field" type="text">
    <select id="list" name="list" size="1">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
</form>

Answer 1

使用香草javascript，您可以将template与data-*一起使用，并通过针对输入值测试data-*值来重建选择框以显示某些值。

const input = document.querySelector('#text')
const select = document.querySelector('#list')
const template = document.querySelector('template')

input.addEventListener('input', e => {
  let val = parseInt(e.target.value)
  // Clone the template
  let t = document.importNode(template.content, true)
  // Create a fragment for the new list
  let f = document.createDocumentFragment()
  
  for (var i = 0; i < t.children.length; i++) {
    let child = t.children[i]
    
    let show = parseInt(child.getAttribute('data-show') || '0')
    // If the data-show is larger than zero and in the input is larger than zero
    // Clone the current option and place it in the fragment
    if(show > 0 && val > 0) f.appendChild(child.cloneNode(true))
    
    // If the data-show is smaller than zero and in the input is smaller than zero
    // Clone the current option and place it in the fragment
    if(show < 0 && val < 0) f.appendChild(child.cloneNode(true))
  }
  
  // If the fragment doesn't have any options display a message
  if (f.children.length == 0) {
    let option = document.createElement('option')
    option.textContent = 'Enter a number in the text field'
    f.appendChild(option)
  }
  
  // Set the value of the select
  select.innerHTML = ''
  select.appendChild(f)
})

<form id="test" name="test" target="_self">
  <input id="text" name="text field" type="text">
  <select id="list" name="list" size="1">
    <option>Enter a number in the text field</option>
  </select>
</form>

<template>
  <option data-show="-1" value="1">1</option>
  <option data-show="-1" value="2">2</option>
  <option data-show="1" value="3">3</option>
  <option data-show="1" value="4">4</option>
  <!-- This value should never show since it is set to zero -->
  <option data-show="0" value="5">5</option>
  <!-- This value should never show since it doesn't have a data-show attribute -->
  <option value="6">6</option>
</template>

Answer 2

您可能想给您的选项ID，因为将值用作标识符可能会出现问题。还建议您使用侦听器输入文本字段，这是给定我给选项ID为“ option1”的示例：

$('#text').on('input', function(){
  if($('#text').val() > 0){
    $('#option1').show();
  }
  else($('#option1').hide());
})

显示\隐藏基于文本字段值的选择字段选项

2 个答案: