Dependent dropdown list with go to url button + search option

Viewed 32

I try to combine the Dependent dropdown list that contains a URL with a search box option.

<script type="text/javascript">
    function goToNewPage()
  {
    var url = document.getElementById('store').value;
    console.log(url);
    if(url != 'none') {
      window.location = url;
    }
  }
</script>

<form id="formname" name="Sate-Store">

      <select id="select-state" name="state" placeholder="search product...">
        <option value="">choose product...</option>
                        <option value="product1">product1</option>
                        <option value="product2">product2</option>
                        <option value="product3">product3</option>
                    </select>
                    <select disabled="disabled" class="subcat" id="store" name="store">
                        <option value>choose size</option>
                        <!-- product1 -->
                        <option rel="product1" value="https://example.com/product1/S">small</option>
                       <option rel="product1" value="https://example.com/product1/M">medium</option>
                        <option rel="product1" value="https://example.com/product1/L">large</option>
                        <!-- product2-->
                        <option rel="product2" value="https://example.com/product2/S">small</option>
                        <option rel="product2" value="https://example.com/product2/M">medium</option>
                        <option rel="product2" value="https://example.com/product2/L">large</option>
                            <!-- product3-->
                        <option rel="product3" value="https://example.com/product3/S">Mini</option>
                        <option rel="product3" value="https://example.com/product3/M">Sedang</option>
                        <option rel="product3" value="https://example.com/product3/L">Besar</option>
                        </select>
          <input type=button value="go to" onclick="goToNewPage()" />

    </form>

CSS

      <style>
      .subcat option{
         display:none;

      }

      .subcat option.label{
         display: flex;
     }
     </style>

JS

     <script type="text/javascript">
      jQuery(function(){

         var $cat = jQuery("#select-state"),
            $subcat = jQuery(".subcat");

        $cat.on("change",function(){
            var _rel = jQuery(this).val();
           $subcat.find("option").attr("style","");
           $subcat.val("");
           if(!_rel) return $subcat.prop("disabled",true);
           $subcat.find("[rel="+_rel+"]").show();
           $subcat.prop("disabled",false);
       });

   });
    </script>

"The dropdown list worked with go to URL button" run well. But when I put this code (for search option function)

    <script type="text/javascript">

       jQuery(document).ready(function () {
            $('select').selectize({
               sortField: 'text'
           });
       });
    </script>

the search option code run well, but the dependent drop-down list with the URL was not working.

I really appreciate any kind of help or advice. Thank you in advance.

0 Answers
Related