title: How to find previous element with specific pattern
body: <p>I could not build up the solution how to find the previous element without specific pattern.</p>
  <p><strong>Description:</strong> In the select option below is a simple Select box. The parent items have no <code>-</code> or dash, and the parents are created, then the children option values, so always, the children option values have greater value than parent value.</p>
  <p>I am trying to find the parent value if a element is selected, if the element selected is parent, then return the parent value.</p>
  <p>This is simple and obvious problem but I could not figure out the problem, if anyone could show how to get the above.</p>
  <p><strong>The html is from CMS - Drupal</strong> the html can not be changed
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>window.addEventListener("load", selectOptionVal);
  
  function selectOptionVal(){
    let selectBox = document.getElementById("edit-field-category");
    
     selectBox.onchange = function(){
      let selectedOption = selectBox.options[selectBox.selectedIndex].value;
      console.log(selectedOption);
  
      let selectOptionText = selectBox.options[selectBox.selectedIndex].text;
      
      let ifParent = isParent(selectOptionText);
      
      if(ifParent == true){
        parentVal = selectedOption;
      } else {
        parentVal = getParentAboveValue(selectedOption);
      }
      
      console.log(parentVal);
      
      function getParentAboveValue(e){ //argument must be number, and return number, enter option value(selectedOption)
        
      }
      
      function isParent(e){
        if(e[0] == '-'){
          return false;
        } else {
          return true;
        }
      }
      
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="js-form-item form-item js-form-type-select form-type-select js-form-item-field-category form-item-field-category"&gt;
        &lt;label for="edit-field-category"&gt;Category&lt;/label&gt;
          &lt;select data-drupal-selector="edit-field-category" id="edit-field-category" name="field_category" class="form-select"&gt;
          &lt;option value="_none"&gt;- None -&lt;/option&gt;
          &lt;option value="6"&gt;Amphibean&lt;/option&gt;
          &lt;option value="7"&gt;-Frog&lt;/option&gt;
          &lt;option value="8"&gt;-Salamandar&lt;/option&gt;
          &lt;option value="1"&gt;Dog&lt;/option&gt;
          &lt;option value="3"&gt;-Alceschian&lt;/option&gt;
          &lt;option value="2"&gt;-Bulldog&lt;/option&gt;
          &lt;option value="5"&gt;-Chihuahua&lt;/option&gt;
          &lt;option value="4"&gt;-Pug&lt;/option&gt;
          &lt;option value="9"&gt;ParentOne&lt;/option&gt;
          &lt;option value="10"&gt;-Child&lt;/option&gt;
          &lt;option value="11"&gt;-Childdot&lt;/option&gt;
          &lt;option value="12"&gt;-Childtwo&lt;/option&gt;
          &lt;option value="13"&gt;-Childanother&lt;/option&gt;
          &lt;option value="29"&gt;Reptile&lt;/option&gt;
          &lt;option value="30"&gt;-Snake&lt;/option&gt;
          &lt;option value="31"&gt;-Crocodile&lt;/option&gt;
          &lt;option value="32"&gt;-Gecko&lt;/option&gt;
          &lt;option value="33"&gt;-Lizard&lt;/option&gt;
          &lt;option value="34"&gt;-Chameleon&lt;/option&gt;
          &lt;option value="35"&gt;-Cobra&lt;/option&gt;
          &lt;/select&gt;
          &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>