Select2 to open hyperlink from get_term_link WordPress
- SOLVED
I have Select2 working on my site.
However I now need to link the <option> value to a slug.
<?php echo get_term_link( $brand->slug, 'stains' ); ?>
Here is the JS
jQuery(document).ready(function() {
jQuery(".js-example-basic-single").select2();
});
Here is what I presently have.
<select class="js-example-basic-single">
<?php foreach( $cam_stains as $brand ) : ?>
<option>
<a href="<?php echo get_term_link( $brand->slug, 'stains' ); ?>">
<?php echo $brand->name; ?>
</a>
</option>
<?php endforeach ?>
</select>
[[LINK href="http://grampianscarpetcleaning.grampians.wpengine.com/stain-removal-guide/"]]
http://grampianscarpetcleaning.grampians.wpengine.com/stain-removal-guide/[[/LINK]]
I require all the JS and any changes to the PHP.
Answers (4)
Reigel Gallarde answers:
you need this format...
<select class="js-example-basic-single">
<?php foreach( $cam_stains as $brand ) : ?>
<option value="<?php echo get_term_link( $brand->slug, 'stains' ); ?>">
<?php echo $brand->name; ?>
</option>
<?php endforeach ?>
</select>
and you need this javascript..
jQuery(document).ready(function() {
var $select2 = jQuery(".js-example-basic-single").select2();
$select2.on("select2:select", function (e) {
document.location.href = this.value;
});
});
parksey18 comments:
That's perfect.
How can I get a placeholder to work, as I cannot select the first one:
Here is the API:
https://select2.github.io/examples.html
Reigel Gallarde comments:
on your select2(), do something like this...
var $select2 = jQuery(".js-example-basic-single").select2({
placeholder: "Select option",
});
Reigel Gallarde comments:
I have a typo.. remove the comma...
Reigel Gallarde comments:
full javascript code
jQuery(document).ready(function() {
var $select2 = jQuery(".js-example-basic-single").select2({
placeholder: "Select option"
});
$select2.on("select2:select", function (e) {
document.location.href = this.value;
});
});
parksey18 comments:
I have it identical, however its not working.
http://grampianscarpetcleaning.grampians.wpengine.com/wp-content/themes/grampians-carpet-cleaning/js/select2.js?ver=1
Reigel Gallarde comments:
make your your code on php is not duplicated
Reigel Gallarde comments:
javascript is good... change your php code to this..
<select class="js-example-basic-single">
<option value="">Select Option</option>
<?php foreach( $cam_stains as $brand ) : ?>
<option value="<?php echo get_term_link( $brand->slug, 'stains' ); ?>">
<?php echo $brand->name; ?>
</option>
<?php endforeach ?>
</select>
Reigel Gallarde comments:
<select class="js-example-basic-single">
<option value="">Select Option</option>
<?php foreach( $cam_stains as $brand ) : ?>
<option value="<?php echo get_term_link( $brand->slug, 'stains' ); ?>">
<?php echo $brand->name; ?>
</option>
<?php endforeach ?>
</select>
parksey18 comments:
Got it:
Just changed this:
placeholder: "Select option"
To this:
placeholder: 'Select option'
Thanks for your help.
Reigel Gallarde comments:
great! don't forget to [[LINK href="http://www.wpquestions.com/question/pickAWinner/id/15599"]]Vote to Award Prize[[/LINK]]
Arnav Joy answers:
are you looking for this
<select class="js-example-basic-single">
<?php foreach( $cam_stains as $brand ) : ?>
<option value="<?php echo $brand->slug; ?>">
<a href="<?php echo get_term_link( $brand->slug, 'stains' ); ?>">
<?php echo $brand->name; ?>
</a>
</option>
<?php endforeach ?>
</select>
Arnav Joy comments:
or this
<select class="js-example-basic-single">
<?php foreach( $cam_stains as $brand ) : ?>
<option>
<a href="<?php echo $brand->slug; ?>">
<?php echo $brand->name; ?>
</a>
</option>
<?php endforeach ?>
</select>
parksey18 comments:
No, Select2 doesn't use the value attribute.
https://select2.github.io/
Arnav Joy comments:
then try my second answer.
parksey18 comments:
And Select2 doesn't use the a href attribute.
https://select2.github.io/
Arnav Joy comments:
try this
<select class="js-example-basic-single">
<?php foreach( $cam_stains as $brand ) : ?>
<option value="<?php echo $brand->slug; ?>">
<?php echo $brand->name; ?>
</option>
<?php endforeach ?>
</select>
parksey18 comments:
Nope doesn't work, it's the JS that needs work.
PHP is fine.
https://select2.github.io/options.html
Andrea P answers:
I am not sure if this is compatible with Select2, but this would be the way to go if you want to make a selector to got o a link when an option is selected:
<select class="js-example-basic-single" onchange="location = this.options[this.selectedIndex].value;">
<?php foreach( $cam_stains as $brand ) : ?>
<option value="<?php echo get_term_link( $brand->slug, 'stains' ); ?>">
<?php echo $brand->name; ?>
</option>
<?php endforeach ?>
</select>
Hariprasad Vijayan answers:
Change PHP to this
<select class="js-example-basic-single">
<?php foreach( $cam_stains as $brand ) : ?>
<option value="<?php echo get_term_link( $brand->slug, 'stains' ); ?>"> <?php echo $brand->name; ?> </option>
<?php endforeach ?>
</select>
And JS to this
jQuery(document).ready(function() {
jQuery(".js-example-basic-single").select2().on("select2-select", function(e) {
window.location = e.val;
});
});
check these thread
[[LINK href="http://code.runnable.com/UmuP-67-dQlIAAFU/events-in-select2-for-jquery"]]http://code.runnable.com/UmuP-67-dQlIAAFU/events-in-select2-for-jquery[[/LINK]]