Drop Down Title Change When Item Selected

I have code below for 2 ddls containing 3 items. Is it possible to have the title shown on each drop down list change to whatever item the user selects, but only using vanilla Java

Solution 1:

var div = document.getElementsByClassName('dropdown-content');

  for(var  i =0;i<div.length;i++){

  for(var  j =0;j<div[i].children.length;j++){

   div[i].children[j].addEventListener('click',function(){

     this.parentNode.previousElementSibling.innerHTML = this.innerHTML;
   })
  }
  }

.dropbtn {
        background-color: #4CAF50;
        color: white;
        padding: 13px;
        font-size: 16px;
        width:125px;
        height:45px;
        border: none;
        cursor: pointer;
    }

    .dropdown {
        position: relative;
        display: inline-block;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px8px16px0pxrgba(0,0,0,0.2);
        z-index: 1;
    }

    .dropdown-contenta {
        color: black;
        padding: 12px16px;
        text-decoration: none;
        display: block;
    }

    .dropdown-contenta:hover {background-color: #f1f1f1}

    .dropdown:hover.dropdown-content {
        display: block;
    }

    .dropdown:hover.dropbtn {
        background-color: #3e8e41;
    }

<divclass="dropdown"><buttonclass="dropbtn">Category</button><divclass="dropdown-content"><ahref="#">Link 1</a><ahref="#">Link 2</a><ahref="#">Link 3</a></div></div><divclass="dropdown"><buttonclass="dropbtn">Location</button><divclass="dropdown-content"><ahref="#">Link 1</a><ahref="#">Link 2</a><ahref="#">Link 3</a></div></div>

Solution 2:

You can do this with Vanilla JS.

You'll simply attach click listeners to each anchor, then traverse up the parent nodes to find the button and replace the innerHTML.

Please note that anchors is all the links in you page, so if there are other anchors on your page beside what you've provided, you'll need to be a little more specific when defining the anchors array.

var anchors = document.getElementsByTagName('a');

for(var i = 0, len = anchors.length; i < len; i++) {
  var thisAnchor = anchors[i];
    thisAnchor.onclick = function () {
        var btn = this.parentNode.parentNode.getElementsByTagName('button')[0];
        btn.innerHTML = this.innerHTML;
    }
}

.dropbtn {
        background-color: #4CAF50;
        color: white;
        padding: 13px;
        font-size: 16px;
        width:125px;
        height:45px;
        border: none;
        cursor: pointer;
    }

    .dropdown {
        position: relative;
        display: inline-block;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px8px16px0pxrgba(0,0,0,0.2);
        z-index: 1;
    }

    .dropdown-contenta {
        color: black;
        padding: 12px16px;
        text-decoration: none;
        display: block;
    }

    .dropdown-contenta:hover {background-color: #f1f1f1}

    .dropdown:hover.dropdown-content {
        display: block;
    }

    .dropdown:hover.dropbtn {
        background-color: #3e8e41;
    }

<divclass="dropdown"><buttonclass="dropbtn">Location</button><divclass="dropdown-content"><ahref="#">Link 1</a><ahref="#">Link 2</a><ahref="#">Link 3</a></div></div><divclass="dropdown"><buttonclass="dropbtn">Category</button><divclass="dropdown-content"><ahref="#">Link 1</a><ahref="#">Link 2</a><ahref="#">Link 3</a></div></div>

Solution 3:

Here is a jsfiddle for you. JSFIDDLE

<divclass="dropdown"><buttonid="btn1"class="dropbtn">Location</button><divclass="dropdown-content"><ahref="#"onclick="doSelect('Link 1','btn1')">Link 1</a><ahref="#"onclick="doSelect('Link 2','btn1')">Link 2</a><ahref="#"onclick="doSelect('Link 3','btn1')">Link 3</a></div></div><divclass="dropdown"><buttonid="btn2"class="dropbtn">Category</button><divclass="dropdown-content"><ahref="#"onclick="doSelect('Link 1','btn2')">Link 1</a><ahref="#"onclick="doSelect('Link 2','btn2')">Link 2</a><ahref="#"onclick="doSelect('Link 3','btn2')">Link 3</a></div></div><script>functiondoSelect(text,btn){

    var myElement = document.getElementById(btn);

myElement.innerText = text;

}
</script>