Linking Functionality Broken in Custom Select Menu

Question

I'm working on an issue with a Wordpress site I'm working on. See page here: http://v2new.brandgineeringbydesign.com/blog/

In the right sidebar, there's a dropdown menu that I'm trying to customize with CSS away from whatever the default browser uses. The code that I'm using hides the old dropdown menu and creates a new one using javascript below:

<script>
var x, i, j, l, ll, selElmnt, a, b, c;
/*look for any elements with the class "custom-select":*/
x = document.getElementsByClassName("widget_categories");
l = x.length;
for (i = 0; i < l; i++) {
  selElmnt = x[i].getElementsByTagName("select")[0];
  ll = selElmnt.length;
  /*for each element, create a new DIV that will act as the selected item:*/
  a = document.createElement("DIV");
  a.setAttribute("class", "select-selected");
  a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
  x[i].appendChild(a);
  /*for each element, create a new DIV that will contain the option list:*/
  b = document.createElement("DIV");
  b.setAttribute("class", "select-items select-hide");
  for (j = 1; j < ll; j++) {
    /*for each option in the original select element,
    create a new DIV that will act as an option item:*/
    c = document.createElement("DIV");
    c.innerHTML = selElmnt.options[j].innerHTML;
    c.addEventListener("click", function(e) {
        /*when an item is clicked, update the original select box,
        and the selected item:*/
        var y, i, k, s, h, sl, yl;
        s = this.parentNode.parentNode.getElementsByTagName("select")[0];
        sl = s.length;
        h = this.parentNode.previousSibling;
        for (i = 0; i < sl; i++) {
          if (s.options[i].innerHTML == this.innerHTML) {
            s.selectedIndex = i;
            h.innerHTML = this.innerHTML;
            y = this.parentNode.getElementsByClassName("same-as-selected");
            yl = y.length;
            for (k = 0; k < yl; k++) {
              y[k].removeAttribute("class");
            }
            this.setAttribute("class", "same-as-selected");
            break;
          }
        }
        h.click();
    });
    b.appendChild(c);
  }
  x[i].appendChild(b);
  a.addEventListener("click", function(e) {
      /*when the select box is clicked, close any other select boxes,
      and open/close the current select box:*/
      e.stopPropagation();
      closeAllSelect(this);
      this.nextSibling.classList.toggle("select-hide");
      this.classList.toggle("select-arrow-active");
    });
}
function closeAllSelect(elmnt) {
  /*a function that will close all select boxes in the document,
  except the current select box:*/
  var x, y, i, xl, yl, arrNo = [];
  x = document.getElementsByClassName("select-items");
  y = document.getElementsByClassName("select-selected");
  xl = x.length;
  yl = y.length;
  for (i = 0; i < yl; i++) {
    if (elmnt == y[i]) {
      arrNo.push(i)
    } else {
      y[i].classList.remove("select-arrow-active");
    }
  }
  for (i = 0; i < xl; i++) {
    if (arrNo.indexOf(i)) {
      x[i].classList.add("select-hide");
    }
  }
}
/*if the user clicks anywhere outside the select box,
then close all select boxes:*/
document.addEventListener("click", closeAllSelect);
</script>

The code, coupled with the below CSS works great but the dropdown linking functionality no longer works. Maybe the javascript needs an extra line of code or two? Your help would be awesome!

.widget_categories {
  position: relative;
  /*font-family: Arial;*/
}

.widget_categories select {
  display: none!important; /*hide original SELECT element:*/
}

.widget_categories .select-selected {
  background-color: #ed1c24!important;
}

/*style the arrow inside the select element:*/
.widget_categories .select-selected:after {
  position: absolute!important;
  content: ""!important;
  top: 127px!important;
  right: 15px!important;
  width: 0!important;
  height: 0!important;
  border: 6px solid transparent!important;
  border-color: #fff transparent transparent transparent!important;
}

/*point the arrow upwards when the select box is open (active):*/
.widget_categories .select-selected .select-arrow-active:after {
  border-color: transparent transparent #fff transparent!important;
  top: 7px!important;
}

/*style the items (options), including the selected item:*/
.widget_categories .select-items div,.select-selected {
  color: #ffffff!important;
  padding: 8px 16px!important;
  border: 1px solid transparent!important;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent!important;
  cursor: pointer!important;
  user-select: none!important;
}

/*style ONLY open dropdown items*/
.widget_categories .select-items div {
    padding:0 0 0 15px!important;
    font-size:13px;
}

/*style items (options):*/
.widget_categories .select-items {
  position: absolute!important;
  background-color: #ed1c24!important;
  top: 100%!important;
  left: 0!important;
  right: 0!important;
  z-index: 99!important;
}

/*hide the items when the select box is closed:*/
.widget_categories .select-hide {
  display: none!important;
}

.widget_categories .select-items div:hover, .same-as-selected {
  background-color: rgba(0, 0, 0, 0.1)!important;
}

@media only screen and (min-width: 1150px) {
  .widget_categories .select-selected:after {
  top: 97px!important;
  right: 15px!important;
}
}

@media only screen and (max-width: 800px) {
  .widget_categories {
      display:none;
  }
}

Answer 1

the select box execute followin function:

    <script type="text/javascript">
/* <![CDATA[ */
(function() {
    var dropdown = document.getElementById( "cat" );
    function onCatChange() {
        if ( dropdown.options[ dropdown.selectedIndex ].value > 0 ) {
            dropdown.parentNode.submit();
        }
    }
    dropdown.onchange = onCatChange;
})();
/* ]]&gt; */
</script>

and the form around the select box is:

<form action="http://v2new.brandgineeringbydesign.com" method="get">
</form>

you have to execute this form.

Or you have to do something like this:

var cat = 190; 
location.href = 'http://v2new.brandgineeringbydesign.com?cat=' + cat;