Ask your WordPress questions! Pay money and get answers fast! (more info)

Select2 to open hyperlink from get_term_link

  • 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)

2016-02-19

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]]

2016-02-19

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

2016-02-19

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>

2016-02-19

Hariprasad 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]]