How to select a datalist option

Question

I'm trying to create a registration form and I need to show a secondary choice for users who select a specific option, do you see where the mistake is?

 <div> <label for="prof_ecm">Dichiaro di essere:</label> <input type="text" list="prof_k" class="form-control" name="prof_ecm" id="prof_ecm" placeholder="* campo obbligatorio" required> <datalist id="prof_k"> <option value="Dipendente" id="dipen" onClick="dip()"> <option value="Convenzionato"> <option value="Libero professionista"> <option value="Privo di occupazione"> </datalist> </div> <div id="div_ente" style="display: none;"> <label for="ente">Se dipendente, specificare l'Ente</label> <input type="text" class="form-control" name="ente" id="ente"> </div> <script> function dip() { var element = document.getElementById("dipen").value; if (element = "dipendente") { document.getElementById("div_ente").style.display = "inline"; } } </script> 

Answer 1

I don't know exactly where your problem is but if you want to create groups in select tag you can try <optgroup> tag ( optgroup ). It's If you want to change or create new select tag you have to do it in JavaScript.

Answer 2

Capture onchange event of input element rather than option element like below,

 function dip(element) { if (element.value == "Dipendente") { document.getElementById("div_ente").style.display = "inline"; } }; 

 <div> <label for="prof_ecm">Dichiaro di essere:</label> <input type="text" list="prof_k" class="form-control" name="prof_ecm" id="prof_ecm" placeholder="* campo obbligatorio" required onchange="dip(this)" > <datalist id="prof_k"> <option value="Dipendente"> <option value="Convenzionato"> <option value="Libero professionista"> <option value="Privo di occupazione"> </datalist> </div> <div id="div_ente" style="display: none;"> <label for="ente">Se dipendente, specificare l'Ente</label> <input type="text" class="form-control" name="ente" id="ente"> </div> 

Also you had few typos such as option value is "Dipendente" and you are checking against "dipendente", and the extra closing bracket in the end.