How to make a dropdown work using list items and get values from it

Question

I want to add multiple drop downs using list items so that it does the following: When I click on ul, the list items drop down, and then I click on a list item, the value of that list must replace the one from the list that currently works as a placeholder.

It is basically the same as this fiddle I found but I am struggling to make it work in my codepen here

I am not really advanced in JavaScript so I hope you can help.

How can I make my code function as if it is a normal select tag? I am not using select tag because I intend to have specific styling that select and option tags don't allow.

$(document).ready(function() {
  $("ul.which-way").on("click", function() {
    $(this).find('li').toggleClass("open-list");
    $(this).find('open-list').css("display", "block");
  });
  $("li.cadja").on("click", function() {});
});

.which-wrapper {
  width: 100%;
  max-width: 300px;
}

ul.which-way {
  margin: 0;
  list-style: none;
  background-color: grey;
  margin-bottom: 5px;
}

ul.which-way li:not(:first-child) {
  display: none;
}

ul.which-way {
  cursor: pointer;
  padding: 0;
}

li.open-list {
  display: block !important;
}

.find {
  margin-bottom: 10px;
  display: inline-block;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="which-wrapper">
  <div class="drowpdown-one dropdown">
    <ul class="which-way">
      <li class="which-init">Unguided I-Day Return Trips</li>
      <li data-value="value 2" class="cadja"><span class="value">darling-wine-hops-day-by-which-way</span>Darling Wine & Beer Trip</li>
      <li data-value="value 3" class="cadja"><span class="value">mamre-werf-khwa-ttu-culture-day-by-which-way-trips</span>Culture & Adventure Trip</li>
      <li data-value="value 4" class="cadja"><span class="value">cape-west-coast-wildlife-fossil-trip</span>Wildlife & Fossils Trip</li>
    </ul>
    <a href="#" id="trip" class="find">FIND YOUR TRIP</a>
  </div>

  <ul class="which-way">
    <li class="which-init">Unguided I-Day Return Trips</li>
    <li data-value="value 2"><span class="value">darling-wine-hops-day-by-which-way</span>Darling Wine & Beer Trip</li>
    <li data-value="value 3"><span class="value">mamre-werf-khwa-ttu-culture-day-by-which-way-trips</span>Culture & Adventure Trip</li>
    <li data-value="value 4"><span class="value">cape-west-coast-wildlife-fossil-trip</span>Wildlife & Fossils Trip</li>
  </ul>
  <a href="#" id="trip" class="find">FIND YOUR TRIP</a>
</div>
</div>

Answer 1

So this should do the work, if you want to support older IE(7/8) you have to check for IE and use textContent (code taken from your codepen)

$(document).ready(function(){
      $("ul.which-way").on("click", function() {
            $(this).find('li').toggleClass("open-list");
          $(this).find('open-list').css("display", "block");
      });
      $("li.cadja").on("click", function(){
          //will log your text, this is the selected element in onClicks
          console.log(this.innerText);
          //get the parent element and find the which-init and replace the text 
        this.parentElement.getElementsByClassName('which-init')[0].innerText = this.innerText;
      });
});

Ok i hope i did understand you, maybe this helps. I did the hole thing in jquery so it looks a bit different

$(document).ready(function(){
      $("ul.which-way").on("click", function() {
            $(this).find('li').toggleClass("open-list");
          $(this).find('open-list').css("display", "block");
      });
      $("li.cadja").on("click", function(){
          //will log your text, this is the selected element in onClicks
          console.log($(this).html());
          //get the parent element and find the which-init and replace the all spans and set it in wich-init (maybe you will find a better name) 
          $($(this).parent().find('.which-init')[0]).html($(this).html());
        // so u need the value of this selected element we make this to a jquery type element and log it
        console.log('the value from onClick: ', $($(this).find('span.value')[0]).text());
        //do something with your value here :)
        //maybe call a handler for dropdown-one, make a generic one (handler) or write one for dropdown-two
        handleDropdownOne();

      });  
});

//not best practice but it is for explanation
window.handleDropdownOne = function() {
  //will log the value if the user selected something in the first dropdown, the selector is rly ugly :)
  var dropOneValue = $($($('.drowpdown-one').find('.which-init')[0]).find('span.value')[0]).text();
  console.log('from handleDrpdownOne function: ', dropOneValue);
};

//call the function on start, it is undefined
handleDropdownOne();