My page is shown in the image below. Users must select the city they are in using the dropdown. Then they click one of the images. The link is currently <a href="{path=type/{title}/}">. I'd like it to be automatically populated like <a href="{path=type/{title}/Portland/}">, based on whatever is selected in the dropdown.

I don't want the dropdown to load a new page - that would be way too slow. So I am looking for an alternative solution (CSS3 or JavaScript?), something that is lightweight and quick.

{exp:channel:entries channel="type" search:primary-category="not --" search:secondary-category="" dynamic="no"}
    <a href="{path=type/{title}/Portland/}">
       <div id="secondary-images">
           {exp:ce_img:single src="{type-image}" max="100" crop="yes" }


2 Answers 2


Assuming your dropdown is named and id's as city_select and has the vlaues set to the URI that you wisdh to add, like this :

<select id="city_select" name="city_select">
    <option value="Portland">Portland, Oregon</option>
    <option value="USA">USA, Earth</option>

The below is pure jquery :


    //get the common part of the URI
    var targetSegment = 3;

    //wait for the page to load

        //on change event

            //iterate the links (add a valid selector here)
            $('#container a').each(function(){

                //get the new 'part'
                var extraUri = $('#city_select option:selected').eq(0).attr('value');

                //explode the current URI of the link
                var uriParts = $(this).attr('href').split('/');

                //build new URI
                var myUri = "";
                for ( var c = 1 ; c < targetSegment ; c++ ) {
                    myUri += uriParts[c] + "/";
                myUri += extraUri;

                //apply the URI
                $(this).attr('href', myUri);





Or at least something like that, you'll have to debug the script yourself as I've written this straight to notepad (my test sandbox site is no available atm) so it can also probably be hightly optimised, but I beleive this will give you the idea...

  • Thank you very much - that definitely gives me something to work with!
    – Geoff
    May 12, 2015 at 22:03
  • Let us know how you get on and if you come up with something different please do answer your own question. Otherwise if this (or any other answer) is the way you go please mark the answer, it helps others with similar problems!
    – Blatant
    May 13, 2015 at 8:44

Blatants response was very helpful in figuring out how to proceed. I hired someone to get this working exactly as needed, and here is the code that I am using:

var changed = 0;
function myFunction() {
    var re = /type/;
    a = document.getElementsByTagName('a');
    for (index = 0; index < a.length; ++index) {
        if (changed==1) {
            a[index].href = a[index].href.replace(oldvalue, '');
        if (a[index].href.match(re)) {
            a[index].href = a[index] + '/' + document.getElementById("topic").value;
    oldvalue='/' + document.getElementById("topic").value;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.