¿Cómo mantengo mi cuadro de selección seleccionando la primera opción o cualquier opción? No quiero que aparezca algo en el cuadro sin que el usuario seleccione algo en el cuadro de selección. Perdón por la pregunta, todavía soy un novato en JavaScript y HTML.
La imagen está aquí: https://pasteboard.co/1bfzs5M9l1Oe.png
HTML
<div class="resume-skill-item"> <h5> <ul class="list-inline"> <div align="right"> <select id="tags" onchange="update()"> <option selected="true" disabled="disabled">*Select That Applies</option> <option value="mechanic">Mechanic</option> <option value="appliance_repairer">Appliance Repairer</option> <option value="carpenter">Carpenter</option> <option value="plumber">Plumber</option> <option value="technician">Technician</option> </select> </div> <div id="text" class="single-textarea"> </div> </ul> </h5> </div>```JavaScript
function update() { var ttl_text = document.getElementsByClassName("tags"); var select = document.getElementById('tags'); var option = select.options[select.selectedIndex]; ttl_text = ttl_text.length + 1; document.getElementById("text").innerHTML += "<li class='list-inline-item' id='tag" + ttl_text + "'><span class='badge badge-dark'>" + option.text + "<button class='fa fa-times-circle text-white' style='margin-left: 5px;' onclick=remove_tag('tag" + ttl_text + "');></button></span></li>"; } update(); function remove_tag(id) { document.getElementById(id).innerHTML = ""; }Puede agregar otra función solo para deshabilitar el primer elemento y llamarlo al hacer clic. Consulte el siguiente ejemplo ( https://codepen.io/alekskorovin/pen/XWebWGX ):
function update() { var ttl_text = document.getElementsByClassName("tags"); var select = document.getElementById("tags"); var option = select.options[select.selectedIndex]; ttl_text = ttl_text.length + 1; document.getElementById("text").innerHTML += "<li class='list-inline-item' id='tag" + ttl_text + "'><span class='badge badge-dark'>" + option.text + "<button class='fa fa-times-circle text-white' style='margin-left: 5px;' onclick=remove_tag('tag" + ttl_text + "');></button></span></li>"; } function disableFirstItem() { $("#tags option:first-child").attr("disabled", "disabled"); } update(); function remove_tag(id) { document.getElementById(id).innerHTML = ""; } <div class="resume-skill-item"> <h5> <ul class="list-inline"> <div align="right"> <select id="tags" onchange="update()" onclick="disableFirstItem()"> <option value="*">*Select That Applies</option> <option value="mechanic">Mechanic</option> <option value="appliance_repairer">Appliance Repairer</option> <option value="carpenter">Carpenter</option> <option value="plumber">Plumber</option> <option value="technician">Technician</option> </select> </div> <div id="text" class="single-textarea"> </div> </ul> </h5> </div>