Transform the functionality of DIV and UL to mimic that of a SELECT element

I am attempting to update the text of the <span class="hideSelect"> element to match the text of the selected <li>, so that it functions like a <select> element.

CSS:

.myDrop {
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 5px 10px;
  max- width: 100%;
  min-width: 100%;
  vertical-align: middle;
}

.mydrop ul {
  display: none;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 3px;
  max-height: 250px;
  overflow: auto;
}

.mydrop ul li {
  padding: 5px 10px;
}

.mydrop ul li:hover {
  background: #ddd;
}

JavaScript:

$(".mydrop").click(function(e) {
    e.stopPropagation();
    $(".mydrop>ul").stop().slideToggle(500);
    $(document).click(function(){
      $(".mydrop>ul").hide();
    });
  });
  $(".mydrop>ul li").click(function () {
    $(".hideSelect").hide();
  });

HTML:

<div class="container">
  <div class="row">
    <div class="col-md-3">
      <div class="mydrop">
        <div class="myDrop">
          <span class="hideSelect">
              <span id="caption">my dropdown</span>
              <span class="pull-right"><i class="fa fa-caret-down"></i>
    </span>
          </span>
        </div>
        <ul id="options">
          <li class="visilkl">Hot Dog, Fries and a Soda</li>
          <li>Burger, Shake and a Smile</li>
          <li>Sugar, Spice and all things nice</li>
          <li>Sugar, Spice and all things nice</li>
          <li>Sugar, Spice and all things nice</li>
          <li>Sugar, Spice and all things nice</li>
          <li>Sugar, Spice and all things nice</li>
          <li>Sugar, Spice and all things nice</li>
          <li>Sugar, Spice and all things nice</li>
          <li>Sugar, Spice and all things nice</li>
          <li>Sugar, Spice and all things nice</li>
          <li>Sugar, Spice and all things nice</li>
          <li>Sugar, Spice and all things nice</li>
        </ul>
      </div>
    </div>
  </div>
</div>
jqueryhtmlcss

Answer №1

If I am understanding correctly, you are looking to conceal the content within <span class="hideSelect"> so that the dropdown menu will be hidden once an option is selected from the list (<ul> tag).

One way you could accomplish this is by using the following code:

$(".dropdown").click(function(e) {
    e.stopPropagation();
    $(".dropdown>ul").stop().slideToggle(500);
    $(document).click(function() {
        $(".dropdown>ul").hide();
    });
});
$(".dropdown>ul li").click(function() {
    $(".hideSelect").text(this.innerHTML); //Retrieve the text of the clicked list item and display it within the span with class hideSelect
})

The structure of the HTML remains unchanged.

To see a demonstration, you can visit this JSFiddle link.

I hope this information proves helpful!

Answer №2

A slight modification has been made to your HTML in order for the JavaScript to function correctly.

Now, a span has been added around "my dropdown", like so:

<span class="dropText">my dropdown</span>

This adjustment will make future changes easier to implement.

Once you've completed this step, you can integrate the following code into your webpage for it to work smoothly:

$(document).ready(function() {
    var showingDropdown = false;

    $(".hideSelect").click(function() {
        showingDropdown = true;
        $(".mydrop ul").show();
    });

    $(".mydrop ul li").click(function() {
        if(showingDropdown) {
            showingDropdown = false;
            $(".dropText").text($(this).text());
            $(".mydrop ul").hide();
        }
    });
});

You can view a working example on JSFiddle here

Answer №3

Here is the link you requested: https://jsfiddle.net/athrpcxs/

Does this meet your requirements?

HTML:

<div class="container">
  <div class="row">
    <div class="col-md-3">
      <div class="mydrop">
        <div class="myDrop">
          <span class="hideSelect">
              <span id="caption">my dropdown</span>
              <span class="pull-right"><i class="fa fa-caret-down"></i>
    </span>
          </span>
        </div>
        <ul id="options">
    <li class="visilkl">Hot Dog, Fries and a Soda</li>
          <li>Burger, Shake and a Smile</li>
          <li>Sugar, Spice and all things nice</li>
          <li>Sugar, Spice and all things nice</li>
          <li>Sugar, Spice and all things nice</li>
          <li>Sugar, Spice and all things nice</li>
          <li>Sugar, Spice and all things nice</li>
          <li>Sugar, Spice and all things nice</li>
          <li>Sugar, Spice and all things nice</li>
          <li>Sugar, Spice and all things nice</li>
          <li>Sugar, Spice and all things nice</li>
          <li>Sugar, Spice and all things nice</li>
          <li>Sugar, Spice and all things nice</li>
        </ul>
      </div>
    </div>
  </div>
</div>

<p>JavaScript:</p>

<pre><code>$(".mydrop").click(function(e) {
    e.stopPropagation();
    $(".mydrop>ul").stop().slideToggle(500);
    $(document).click(function(){
      $(".mydrop>ul").hide();
    });
  });
  $(".mydrop > ul li").click(function () {
    $("#caption").text($(this).text());
  });

Answer №4

Give this a shot

$("li").on('click', function(){
    $(this).siblings().hide();
})

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

List organized in two columns utilizing the data-* attribute

Is it possible to display a list in a two-column format based on a data attribute of each item? <ul> <li data-list="general_results">general text1</li> <li data-list="general_results">general text2</li> <li dat ...

htmlcss

Implement CSS to globally style material.angular's mat-card by customizing the background color

Looking for a way to globally change the background of mat-card on material.angular.io. I attempted adding the following code snippet to styles.css with no success. mat-card { background-color: purple; } ...

cssangularangular-material

Tips for customizing the color of the select drop down arrow component:

Is there a way to change the color of the select drop down box arrow part? It needs to be compatible with IE9, Firefox, and other browsers. Currently, the drop down box looks like this: I would like the arrow part to have this appearance: I believe this ...

htmlcssselectdrop-down-menubackground-color

Using multiple <img> tags with identical src attributes

Imagine having a large number of <img> tags all with the same src value, like this: <img src="https://something.com/images/myimg.png" alt="" /> <img src="https://something.com/images/myimg.png" alt="" /> <img src="https://something.co ...

htmlbrowserrequest

margin leakage: potential misalignment caused by nested DIV elements

I am experiencing a strange issue where the margin of a nested DIV is "leaking" out of its parent container. For a better understanding, check out this test case: http://jsbin.com/ibaze The outer wrapper (highlighted in red) does not align perfectly a ...

htmlcss

Guide to concealing List elements from the Search Filter when the search input field is emptied

I am facing a challenge with an HTML list of items. Here is the structure: <ul id="fruits"> <li><a href="#">Mango</a></li> <li><a href="#">Apple</a></li> <li><a href="#">Grape</a>& ...

javascriptjqueryhtml

Form submission fails to trigger AJAX execution

When a form is submitted, I have the jQuery ajax code below that should be executed: <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script> $("form").submit(function() { $.ajax("/myapp/rest/customer/created ...

jqueryajaxforms

PHP - Utilize get_option to send styling options to style.php

I'm having trouble figuring out how to structure my question, but in my plugin folder I have 2 files: 1 - "index.php" add_action( 'wp_enqueue_scripts', 'register_plugin_styles' ); function my_admin_setting() { include(' ...

phpcsswordpress

What are the elevated sections in bootstrap?

Having come from Semantic-UI and starting to learn Bootstrap, I must say that despite its widespread popularity, I find Bootstrap a bit lacking compared to what Semantic-UI has to offer in terms of basic stylings. Currently, I am on the lookout for the Bo ...

htmlcssbootstrap-4semantic-ui

Using ng-options with the Add New feature is not compatible with the select statement

Hello everyone, I have some JSON values that look like this: [{"Employee":{"Emp_id":"EF00001","First_name":"Aruna","Last_name":"Jayalath"}}] Unfortunately, I am having trouble retrieving the values within the select statement when running this function i ...

javascripthtmlangularjs

Guide: Previewing uploaded images with HTML and jQuery, including file names

Any constructive criticism and alternative methods for accomplishing this task are welcomed. I am currently working on writing jQuery code that will allow users to preview file(s) without reloading the DOM. To achieve this, I have been using .append() to ...

javascriptjqueryhtmlcss

Implementing a sorting mechanism for ajax data retrieval

Currently, I am using the code below to save HTML created with jQuery in a database and retrieve it later: $('div[read]').each(function(){ var kelas = $(this).attr('kelas'); $.post('admin.php',{kelas:kelas,id:id},func ...

jqueryhtmlajaxeach

Achieving a consistent fixed width for tbody even when scrollbar is present

thead{ width: calc(100% - 17px); display:block; } tbody{ display:block; overflow-y: auto; height:100px; } http://jsfiddle.net/mkgBx/ Is there a way to adjust the width of the tbody element to match that of the thead element plus the scrollbar? Currently ...

htmlcss

What is the best way to align a GIF and two rows of text within a container div?

Check out my JSFiddle below: In this fiddle, there is an image sized 32 by 32 on the left side and two lines of text on the right. I need help aligning the center of the gif and the text with the middle of the enclosing frame. I've tried adjusting t ...

htmlcss

Enable automatic full-screen mode on Google Chrome upon page load

I would greatly appreciate it if you could provide an answer to this question, even if it is marked as a duplicate. I have tried various solutions and sought help, but unfortunately, nothing seems to be working for me... What I really need is for the brow ...

javascriptjqueryhtmlgoogle-chromebrowser

I'm struggling to interpret the reply received from $.ajax

Looking to make adjustments to my existing code in order to add comments for images that are fetched using $.ajax and returned as html. The plan is to retrieve the comments as a JSON object, and then parse the previously obtained HTML to insert the commen ...

jsonjquery

Is it possible to incorporate an external javascript file in my CSS file?

Currently, I am attempting to create a setup where my background adjusts based on the width of the user's browser. However, I am constrained by a background specified in the external stylesheet under a specific element. While I have the ability to alt ...

javascripthtmlcssbackgroundbrowser-width

JavaScript Loading Screen - Issues with window.onload functionality

I am currently working on creating a loading screen for my project. I need to use JavaScript to remove the CSS property "Display: none" from the page, but for some reason, my code is not functioning as expected. The Issue: I discovered that using window. ...

javascripthtmlcss

What is the process for retrieving data submitted in JSON format?

Hello there! Programming Query: $("#user-search_input").autocomplete({ source: function( request, response ) { var form_data=$("#user-search_input").val(); $.ajax({ url: "./AutoCompliteFind/", dataType: "json", typ ...

phpjqueryajaxjson

Using Vue.js with jQuery plugins: A step-by-step guide

Currently in the process of rewriting code to Vue.js, I am interested in incorporating some Jquery plugins, but I am uncertain about the correct method. One plugin I would like to utilize is a scrollbar: I understand that initialization should look someth ...

jqueryvue.jsscrollbar