HTML中javascript和datalist的问题

Question

我的代码有一个问题，在我的html中有一个带有两个选项的数据列表，当“Azienda”选项被选中时，我想显示名为“Aziende”的div，但当我选择“Privato”时，我不想显示该div，但问题是当我选择“Privato”时，它也显示给我div。有人能帮我吗？

<form class="contact-form" action="#" method="POST">

    <div>
        <input class="lista_c" type="text" list="data_list" name="lista" placeholder="Scegli un opzione">
        <datalist id="data_list">
            <option value="Azienda">Azienda</option>
            <option value="Privato">Privato</option>
        </datalist>
    </div> <br>

    <input class="input1" type="text" name="nome" placeholder="Nome" />
    <input  class="input1" type="text" name="cognome" placeholder="Cognome" /> <br>
    <input class="input2" type="text" name="email" placeholder="Email" /> <br>

    <div id="aziende" style="display: none">
        <input class="nome-azienda" type="text" name="nome-azienda" placeholder="Nome Azienda" />
        <input class="iva" type="text" name="IVA" placeholder="P.IVA" />
    </div>

</form>

<script>
    
    let getvalue = document.getElementsByName('lista') [0];

    getvalue.addEventListener('input', function() {
        if(getvalue !== [0]){
       document.getElementById('aziende').style="display: block";
        }else{
            document.getElementById('aziende').style="display: none";
        }
        })
</script>

Answer 1

您的比较（if语句）无效。您将dom元素'getValue'与单个元素为零的数组进行比较。

我认为您应该比较输入元素的值，而不是元素本身。你还把它和数组做了比较？您应该将其与您要查找的值进行比较：

if (getvalue.value !== 'Azienda') {

为了帮助调试类似的事情，在测试之前使用console.log或alert语句显示变量的值是很有用的：

console.log('value of getvalue input element', getvalue.value);
if (getvalue.value  

Answer 2

正如注释中提到的，您的if测试不正确。有关工作解决方案的详细信息，请参阅下面的注释。

null

.hidden {
  display: none;
}

html lang-html prettyprint-override"><form class="contact-form" action="#" method="POST">

    <div>
        <input class="lista_c" type="text" list="data_list" name="lista" placeholder="Scegli un opzione">
        <datalist id="data_list">
            <option value="Azienda">Azienda</option>
            <option value="Privato">Privato</option>
        </datalist>
    </div> <br>

    <input class="input1" type="text" name="nome" placeholder="Nome" />
    <input  class="input1" type="text" name="cognome" placeholder="Cognome" /> <br>
    <input class="input2" type="text" name="email" placeholder="Email" /> <br>

    <!-- Use CSS classes instead of inline styles when possible. -->
    <div id="aziende" class="hidden">
        <input class="nome-azienda" type="text" name="nome-azienda" placeholder="Nome Azienda" />
        <input class="iva" type="text" name="IVA" placeholder="P.IVA" />
    </div>

</form>

<script>
    const div = document.querySelector("#aziende");
    
    document.querySelector("[name='lista']").addEventListener('input', function() {
      // Just check the value of the input
      if(this.value === "Azienda"){ 
        div.classList.remove("hidden");  // Show the div
      } else {
        div.classList.add("hidden");     // Hide the div
      }
    });
</script>