Converting an unordered list into a <select> dropdown with jquery - a step-by-step guide

Can you help me transform an unordered list that looks like this?

<ul class="selectdropdown">
    <li><a href="one.html" target="_blank">one</a></li>
    <li><a href="two.html" target="_blank">two</a></li>
    <ul>
        <li><a href="twoOne.html" target="_blank">two One</a></li>
        <ul>
            <li><a href="twoOneOne.html" target="_blank">two One One</a></li>
        </ul>
        <li><a href="twoTwo.html" target="_blank">twoTwo</a></li>
    </ul>
    <li><a href="three.html" target="_blank">three</a></li>
    <li><a href="four.html" target="_blank">four</a></li>
    <li><a href="five.html" target="_blank">five</a></li>
    <li><a href="six.html" target="_blank">six</a></li>
    <li><a href="seven.html" target="_blank">seven</a></li>
</ul>

I need to change this layout into a <select> structure

javascriptjquerycsshtml

Answer №1

JavaScript snippet

  jQuery('.dropdown-menu li a').each(function() {
        var element = jQuery(this);
        jQuery('<option />', {
            "value"   : element.attr('href'),
            "text"    : element.text()
        }).appendTo('#main select');
    });
    if (jQuery('.dropdown-menu li a').length < 1) jQuery('#main').hide();

    jQuery('#main').find('select').change(function() {
        window.location = jQuery(this).find('option:selected').val();
    });

HTML Structure

<div id="main">
<select></select>
</div>

To view the code in action, click on this Fiddle Link

Answer №2

Here is a different approach:

.nav-menu {
list-style: none;
padding: 5px 1px;
font-family: 'Segoe UI Light', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
font-weight: 200;
font-size: 16px;
letter-spacing: 0.01em;
font-smooth: always;
color: #000000;
line-height: 15px;
margin: auto;
width: 1018px;
position: relative;
background: #2B5797;
}
.nav-menu:after {
content: "";
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
...
  • Categories
    • Lorem ipsum
      • Categories2
      • Categories3

Find more inspiration at this link.

Answer №3

Check out this recent creation of mine:

<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#dropdownSelect").click(function(){
        $("#multiSelect").slideToggle("fast");
    });
});
</script>
<style>
#dropdownSelect{
    cursor:pointer;
    color:#000;
    padding:7px 20px;
    width:400px;
}
#dropdownSelect p{
  background: #eee;
  width:400px;
}
#multiSelect{
    display:none;
    height:150px;
    background:#ccc;
    z-index:1;
    overflow:auto;
    position:absolute;
    width:400px;
    color:#000;
    top:60px;
    left:28px;
}
#multiSelect ul {
    list-style:none;
    text-decoration:none;
    padding-left:10px;
}
#multiSelect li>ul{
    list-style:none;
    text-decoration:none;
    padding-left: 10px;
    cursor:pointer;
}
</style>
</head>
<body>
<dl>
    <dt id="dropdownSelect">
        <p>Choose</p>
    </dt>
    <dd>
        <div id="multiSelect">
            <ul>
                <li>Link-1</li>
                <li>Link-2</li>
                <li>Link-3</li>
            </ul>
        </div>
    </dd>
</dl>
</body>

Answer №4

If you're looking for a useful plugin that can effortlessly transform your select element into an unordered list, look no further! I rely on this nifty tool regularly because of its sleek design and lightning-fast performance.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to extract a value from the bootbox confirm callback function

When I use bootbox, console.log(r) returns nothing. How can I successfully pass the result to the r variable? function customConfirm(message){ bootbox.confirm({ message: message, buttons: { 'cancel': { ...

jquerytwitter-bootstrapbootbox

Modifying the value of an animated status bar using the same class but different section

I need the status bars to work individually for each one. It would be great if the buttons also worked accordingly. I have been trying to access the value of "data-bar" without success (the script is able to process the "data-max"). However, the script see ...

javascripthtmljquery

What could be causing my component to fail to load properly with Vite?

I have been working on a React project using Vite. Following a tutorial I discovered in an article at https://www.digitalocean.com/community/tutorials/how-to-set-up-a-react-project-with-vite, I encountered an issue. Despite following the tutorial step by ...

javascriptreactjsvite

Personalize Badge Component

I've been on the hunt for a solution to customize a badge component similar to what's seen here: https://mui.com/material-ui/react-badge/. As of now, only options for making it a dot or adding a number in a circle are available. However, I' ...

javascriptreactjsmaterial-ui

Excessive content within the div element causing overflow

In my Laravel project, I am facing an issue with the patient history form. The content overflows under a div as shown in the image below. View first image To address this problem, I tried using overflow:hidden in the CSS section. However, this caused my ...

htmlcsslaravel

Sequelize is incorrectly pointing to an invalid foreign key

There are two tables in my database, namely Transaction and Transaction Details. The recordId serves as a foreign key in the Transaction Details table. My goal is to query a specific Transaction based on its recordId and include all associated Transaction ...

javascriptnode.jsjsonormsequelize.js

Having difficulty adding a Dropdown Menu in a Pop-up Box

I am trying to incorporate a select menu inside of a popover, but every time I attempt to do so, the popover content block remains blank. The popover is associated with a side menu item called "Date History". Below is the code snippet I am using to constr ...

javascripthtmlbootstrap-4

What is the best method to retrieve the value of a button that has been selected from a collection of buttons?

Within a functional component, there is an issue where the choose function keeps printing 'undefined'. I have utilized const [chosen, setchosen] = useState([]) within this code snippet. The full code has been correctly imported and the purpose of ...

javascriptreactjsfirebase

The Kendo Grid is not displaying any data when trying to bind the data source using an ajax callback to the controller

My query is quite similar in nature to this: Binding Kendo Data Source with Async $.ajax calling from C# MVC Controller Action Below is the javascript code used for generating the Kendo grid: $(document).ready(function () { $("#grid").kendo ...

javascriptc#jqueryajaxasp.net-mvc

Issue with AJAX not receiving successful response after function invocation

I am trying to dynamically load data based on the specific URI segment present on the page. Below is my JavaScript code: $(document).ready(function() { $(function() { load_custom_topics(); }); $('#topics_form').submit(funct ...

javascriptajaxcodeigniter

A step-by-step guide to implementing the PUT function in AngularJS using Mongoose

My attempt to send a GET request to the Mongo works fine, but I'm having trouble getting the PUT request to work. My suspicion is that there might be an issue with the path from the controller to the router. I've already tried using both update() ...

javascriptangularjsmongodbmongoosecrud

Errors occurring when trying to parse JSON in Firefox with Firebug, but strangely only happening

Encountering a puzzling error with our application that handles JSON calls. While the app functions flawlessly on various environments and browsers, Firefox presents an issue specifically when run locally. Upon running the code locally, numerous errors occ ...

jqueryjson

Why is the Mongoose ObjectID causing issues when used as a parameter in a function?

Attempted passing a Mongoose ObjectID to a function using an onclick(). Below is the shortened code snippet: <a onclick="Like({{_id}}, {{likes}}, {{dislikes}});" class="btn btn-like"></a> <p id="{{_id}}"> {{likes}} likes </p> < ...

javascriptnode.jsmongodb

Issue with mouseMove function not aligning correctly with object-fit:contain CSS property

My current code allows users to select a color from an image when hovering over the pixel with the mouse. However, I am encountering an issue where the colors do not map correctly when using object-fit: contain for the image. The script seems to be treatin ...

javascripthtmlcssmousemoveobject-fit

What is the best way to add animation to the hide/show function?

<div class="overlay"></div> CSS: .overlay::after { position: fixed; top: 0; left: 0; width: 100%; content: ""; z-index: -1; height: 100%; transit ...

htmlcss

Exploring the magic of Jquery Ajax with ASP MVC 3 Forms

I am currently developing a straightforward web application that requires updating form changes through Ajax requests. Although I have some experience with Ajax calls in MVC1 using MicrosoftAjax, I haven't touched it since. Now I have learned that Mi ...

jqueryasp.netasp.net-mvcajax

Get rid of the rollover effect on the <a> tag when hovering over an image

I have a snippet of code that is fully functional. <div class="user-pic round-pic"> <a href="<?php echo $userLoggedIn; ?>"><img src="<?php echo $user['profile_pic']; ?>"></a> </div> The issue lies in i ...

phpcsshtml

When executing npm run build, the fonts are not displayed properly in Vite

I'm running 'npm run build' to compile my project, and then I use the 'npm run preview' command to view it. However, some images that I've set as background images in my SCSS file are not showing up. The same issue occurs with ...

javascriptcsstypescriptvue.js

Discovering the most recently selected element in jQuery

Currently reading a jQuery tutorial from the Head First series and practicing with an example where I need to identify the last selected element. In Chapter 2, there is a task involving four images on a page. When a user clicks on any of these images, the ...

javascriptjquerycss

Can Typescript classes be hoisted if I use two classes in my code?

Exploring Class Definitions Certain Rules to Comply With Ensuring that the class is defined in advance helps avoid errors. class Polygon { log() { console.log('i am polygon'); } } const p = new Polygon(); // Expected: no errors p.log(); U ...

javascripttypescript