title: Default dropdown value title instead of the empty space
body: <p>I am trying to figure out how to add the name for my dropdown value, which by default is empty. I would like to call it 'Show all' instead. It works with map filters, so it displays the values by function.</p>
  <p><a href="https://i.stack.imgur.com/Up5H2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Up5H2.png" alt="picture" /></a></p>
  <pre><code>function buildDropDownList(title, listItems) {
  
      const filtersDiv = document.getElementById(&quot;filters&quot;);
      const mainDiv = document.createElement(&quot;div2&quot;);
      const filterTitle = document.createElement(&quot;h3&quot;);
      filterTitle.innerText = title;
      filterTitle.classList.add(&quot;py12&quot;, &quot;txt-bold&quot;);
      mainDiv.appendChild(filterTitle);
  
      const selectContainer = document.createElement(&quot;div2&quot;);
    
      selectContainer.classList.add(&quot;select-container&quot;, &quot;center&quot;);
  
      const dropDown = document.createElement(&quot;select&quot;);
      dropDown.classList.add(&quot;select&quot;, &quot;filter-option&quot;);
  
      const selectArrow = document.createElement(&quot;div2&quot;);
      selectArrow.classList.add(&quot;select-arrow&quot;);
  
      const firstOption = document.createElement(&quot;option&quot;);
  
      dropDown.appendChild(firstOption);
      selectContainer.appendChild(dropDown);
      selectContainer.appendChild(selectArrow);
      mainDiv.appendChild(selectContainer);
  
      for (let i = 0; i &lt; listItems.length; i++) {
          const opt = listItems[i];
          const el1 = document.createElement(&quot;option&quot;);
          el1.textContent = opt;
          el1.value = opt;
          dropDown.appendChild(el1);
      
      filtersDiv.appendChild(mainDiv);
  }
  </code></pre>