Steps for creating a functional dropdown menu using list items and retrieving the selected values

Question

Steps for creating a functional dropdown menu using list items and retrieving the selected values

I am looking to implement a feature with multiple drop-down menus using list items. The functionality I desire is that when the user clicks on a ul element, the list items should drop down. Then, upon clicking on a specific list item, the value of that item should replace the placeholder value in the existing list.

I came across a helpful code snippet that demonstrates this behavior, but I am having trouble implementing it in my CodePen project.

As I am not very experienced in JavaScript, I would greatly appreciate any guidance you can provide.

Is there a way to make my code behave like a standard select tag? I have chosen not to use the select tag due to the custom styling requirements that are not possible with select and option tags.

$(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>

javascript jquery html css

Answer 1

Answer №1

To achieve the desired functionality, consider adding support for older IE versions (7/8) by detecting IE and using textContent in your code snippet:

$(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(){
          // Log the selected element's text
          console.log(this.innerText);
          // Find the parent element, locate 'which-init', and replace the text accordingly
        this.parentElement.getElementsByClassName('which-init')[0].innerText = this.innerText;
      });
});

Hopefully, this explanation clarifies the approach. The implementation is jQuery-based, hence appears slightly 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(){
          // Log the element's html on click
          console.log($(this).html());
          // Locate the parent element, find 'which-init', and update its content with all spans 
          $($(this).parent().find('.which-init')[0]).html($(this).html());
        // Convert the selected element to a jQuery object and log its value
        console.log('the value from onClick: ', $($(this).find('span.value')[0]).text());
        // Perform actions based on the value, e.g., calling a handler for dropdown-one
        handleDropdownOne();

      });  
});

// For demonstration purposes
window.handleDropdownOne = function() {
  // Log the value if something is selected in the first dropdown (ugly selector used)
  var dropOneValue = $($($('.drowpdown-one').find('.which-init')[0]).find('span.value')[0]).text();
  console.log('from handleDrpdownOne function: ', dropOneValue);
};

// Initialize the function, currently undefined
handleDropdownOne();

Answer 2

To achieve the desired functionality, consider adding support for older IE versions (7/8) by detecting IE and using textContent in your code snippet:

$(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(){
          // Log the selected element's text
          console.log(this.innerText);
          // Find the parent element, locate 'which-init', and replace the text accordingly
        this.parentElement.getElementsByClassName('which-init')[0].innerText = this.innerText;
      });
});

Hopefully, this explanation clarifies the approach. The implementation is jQuery-based, hence appears slightly 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(){
          // Log the element's html on click
          console.log($(this).html());
          // Locate the parent element, find 'which-init', and update its content with all spans 
          $($(this).parent().find('.which-init')[0]).html($(this).html());
        // Convert the selected element to a jQuery object and log its value
        console.log('the value from onClick: ', $($(this).find('span.value')[0]).text());
        // Perform actions based on the value, e.g., calling a handler for dropdown-one
        handleDropdownOne();

      });  
});

// For demonstration purposes
window.handleDropdownOne = function() {
  // Log the value if something is selected in the first dropdown (ugly selector used)
  var dropOneValue = $($($('.drowpdown-one').find('.which-init')[0]).find('span.value')[0]).text();
  console.log('from handleDrpdownOne function: ', dropOneValue);
};

// Initialize the function, currently undefined
handleDropdownOne();

Steps for creating a functional dropdown menu using list items and retrieving the selected values

Answer №1

Similar questions

Enhancing Tapestry Grid component column sort icons

Determining the optimal number of rows and columns based on an integer value

Adjust size of background image to fit within ie8 window dimensions

Increase the value of a property within an array of objects based on certain conditions

Updating information on <element>

How should Hyphenopoly be properly implemented?

Aligning text vertically to the top with material UI and the TextField component

Issue with ESlint global installation in macOS root terminal

A guide to sketching the ellipsoid with three.js

One of the great features of Next.js is its ability to easily change

Troubleshooting issues with the Select List component in ReactJS

Problems Arising from the Combination of Django and External JavaScript

What steps can be taken to ensure that a function is executed in order to delegate the process forward?

Script function in Google Sheets HTML not being called

Missing table header in HTML causing table to not display correctly

Hide the div once it goes off screen, ensuring that the user stays in the same position on the page

Loading objects with textures in Three.js using the objloader

What are some ways to reuse an angular component multiple times?

Tips for guaranteeing blocking within a loop in Node.JS

Navigating through vuetify's v-select internal stateHow to bypass vuetify's v-select