How to unselect the first option in the selection box?

Question

How do I keep my selection box select the first option or any option? I don't want something to be showing up in the box without the user selecting something in the selection box. Sorry for the question, still a newbie in JavaScript and HTML.

The picture is here: 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 = "";
}

Answer 1

You could add another function just for disabling of the first item and call it on click. Please check the example below (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>