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.