Need Multipe Select2 Drop Downs WordPress
- SOLVED
I have the following code included in my template file. It displays a search dropdown box with a list of my terms.
I would like to create another one of these search boxes with a different set of arguments, however, when I copy / paste the following code in the same template, the 2nd box does not work like the first. What should I do?
Code in Template:
<?php
$args = array(
'hide_empty' => 0,
'taxonomy' => '100gridgroups',
'exclude' => array(16, 20, 22,25, 27, 28, 30, 4, 33,), //* Enter ID's of parent categories to exclude from list
);
$categories = $categories = get_categories( $args );
?>
<select id="goto" style="width: 100%">
<option value="-1">Search Groups</option>
<?php foreach($categories as $category): ?>
<?php echo '<option value="' . get_term_link( $category->slug, '100gridgroups') . '">' . $category->name . '</option>';?>
<?php endforeach ?>
</select>
Code in Footer
<!-- Select2 DropDown-->
<script>
$(document).ready(function()
{
var options = {
placeholder: 'Search',
matcher: function(term, text)
{
var has = true;
var words = term.toUpperCase().split(" ");
for (var i =0; i < words.length; i++){
var word = words[i];
has = has && (text.toUpperCase().indexOf(word) >= 0);
}
return has;
}
};
// Send the user to the category URL
$("#goto").select2(options).on('change', function()
{
var url = $("#goto").val();
window.location.href = url;
});
// Focus our search input
$('#goto').select2('focus');
});
</script>
---- UPDATE -----
Okay so thanks to the tips below, I have gotten the code below to work great (by changed the ID atrributes. Now my only question is, did I really need to copy/paste the entire javascript code again? I have the above JS code in my footer for "goto" as well as the entire JS below for "goto2". Is that the way to do it or should I condense that somehow. If so, how?
Template Code:
<!-- sector Drop Down Start -->
<span class="text-muted">Search by Industry</span>
<?php
$args = array(
'hide_empty' => 0,
'taxonomy' => '100gridgroups',
'include' => array(16, 20, 22,25, 27, 28, 30, 4, 33,), //* Enter ID's of parent categories to exclude from list
);
$categories = $categories = get_categories( $args );
?>
<select id="goto2" style="width: 100%">
<option value="-1">Search Groups</option>
<?php foreach($categories as $category): ?>
<?php echo '<option value="' . get_term_link( $category->slug, '100gridgroups') . '">' . $category->name . '</option>';?>
<?php endforeach ?>
</select>
<!-- sector Down End-->
Footer:
<!-- Select2 DropDown 2-->
<script>
$(document).ready(function()
{
var options = {
placeholder: 'Search',
matcher: function(term, text)
{
var has = true;
var words = term.toUpperCase().split(" ");
for (var i =0; i < words.length; i++){
var word = words[i];
has = has && (text.toUpperCase().indexOf(word) >= 0);
}
return has;
}
};
// Send the user to the category URL
$("#goto2").select2(options).on('change', function()
{
var url = $("#goto2").val();
window.location.href = url;
});
// Focus our search input
$('#goto2').select2('focus');
});
</script>
Answers (2)
Luis Abarca answers:
Try to use a CSS class instead of ID
<select id="goto" style="width: 100%" class="<strong>myselect2</strong>">
<option value="-1">Search Groups</option>
<?php foreach($categories as $category): ?>
<?php echo '<option value="' . get_term_link( $category->slug, '100gridgroups') . '">' . $category->name . '</option>';?>
<?php endforeach ?>
</select>
<select id="goto2" style="width: 100%" class="<strong>myselect2</strong>">
<option value="-1">Search Groups</option>
<?php foreach($categories as $category): ?>
<?php echo '<option value="' . get_term_link( $category->slug, '100gridgroups') . '">' . $category->name . '</option>';?>
<?php endforeach ?>
</select>
JS
$(".myselect2").select2(options).on('change', function()
{
var url = $(this).val();
window.location.href = url;
});
Luis Abarca comments:
You can also use ID's, but you'll need to copy the on change event.
// Original select
$("#goto").select2(options).on('change', function()
{
var url = $(this).val();
window.location.href = url;
});
// Clone
$("<strong>#goto2</strong>").select2(options).on('change', function()
{
var url = $(this).val();
window.location.href = url;
});
streetfire comments:
Can I just copy/paste the elements above and leave the other javascript? Meaning not copy it too? I have updated my question if that help.
Luis Abarca comments:
Well i always write my Javascript code in a separated .js file and add it to the page footer.
It will work for both escenaries (using css class or ID).
your-new-js-file.js
(function($)
{
$(document).ready(function()
{
var options = {
placeholder: 'Search',
matcher: function(term, text)
{
var has = true;
var words = term.toUpperCase().split(" ");
for (var i =0; i < words.length; i++){
var word = words[i];
has = has && (text.toUpperCase().indexOf(word) >= 0);
}
return has;
}
};
// Send the user to the category URL
$("#goto").select2(options).on('change', function()
{
var url = $("#goto").val();
window.location.href = url;
});
$("#goto2").select2(options).on('change', function()
{
var url = $("#goto2").val();
window.location.href = url;
});
// Focus our search input
$('#goto').select2('focus');
$('#goto2').select2('focus');
});
})(jQuery);
footer.php
<script type="text/javascript" src="your-new-js-file.js"></script>
Luis Abarca comments:
I used ID in my last example
streetfire comments:
Thank you!
John Cotton answers:
That's a pretty big question....
When you pasted the second one, did you change the id attribute?
And if so, did you use that changed id to target the element in your javascript?
ie
('#other_goto').select2('focus');
John Cotton comments:
I think it would be helpful to see your attempt at multiple versions as it will be easier to point out what's wrong.
streetfire comments:
My Apologies, I thought it may be simple. Based on your tip I have made some changes and updated my question. Thanks!