The reason that the original code is not working is because each category dropdown <select>
element has an HTML id of cat
. The JavaScript snipets are looking for the element with the ID of cat
, but there are 3 of them. IDs should always be unique in the markup.
wp_dropdown_categories()
does allow the id to be customized, so we can add a unique id to each category dropdown and make the appropriate adjustments to the JS:
<div class="sidebarItem">
<h4>Model Type</h4>
<?php wp_dropdown_categories('show_option_none=Select model type&include=18,19,20,21&id=model_type'); ?>
<script type="text/javascript"><!--
var dropdownModel = document.getElementById("model_type");
function onCatChangeModel() {
if ( dropdownModel.options[dropdownModel.selectedIndex].value > 0 ) {
location.href = "https://wordpress.stackexchange.com/questions/253697/<?php echo get_option("home');
?>/?cat="+dropdownModel.options[dropdownModel.selectedIndex].value;
}
}
dropdownModel.onchange = onCatChangeModel;
--></script>
</div>
<div class="sidebarItem">
<h4>Year Produced</h4>
<?php wp_dropdown_categories('show_option_none=Select year produced&include=7,8,9,10,11,12,13,14,15,16,17&id=year_produced'); ?>
<script type="text/javascript"><!--
var dropdownYear = document.getElementById("year_produced");
function onCatChangeYear() {
if ( dropdownYear.options[dropdownYear.selectedIndex].value > 0 ) {
location.href = "https://wordpress.stackexchange.com/questions/253697/<?php echo get_option("home');
?>/?cat="+dropdownYear.options[dropdownYear.selectedIndex].value;
}
}
dropdownYear.onchange = onCatChangeYear;
--></script>
</div>
<div class="sidebarItem">
<h4>Identified/Unidentified</h4>
<?php wp_dropdown_categories('show_option_none=Select status&include=22,23&id=identified_status'); ?>
<script type="text/javascript"><!--
var dropdownStatus = document.getElementById("identified_status");
function onCatChangeStatus() {
if ( dropdownStatus.options[dropdownStatus.selectedIndex].value > 0 ) {
location.href = "https://wordpress.stackexchange.com/questions/253697/<?php echo get_option("home');
?>/?cat="+dropdownStatus.options[dropdownStatus.selectedIndex].value;
}
}
dropdownStatus.onchange = onCatChangeStatus;
--></script>
</div>