Utilizing Bootstrap to display selected portions of the list content

I am working with a select element that looks like this:

jQuery('.my-select').selectpicker();
.list_img{
    width: 30px;
    height: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="01636e6e75727573607141352f342f32">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="66040909121512140716265248534855">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="52303d3d2621262033227f21373e37312612637c63617c6366">[email protected]</a>/dist/css/bootstrap-select.min.css">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b4d6dbdbc0c7c0c6d5c499c7d1d8d1d7c0f4859a85879a8580">[email protected]</a>/dist/js/bootstrap-select.min.js"></script>
<select class="selectpicker" data-live-search="true">
    <option data-content="<img class='list_img' src='https://cdn.pixabay.com/photo/2016/04/01/12/16/car-1300629_960_720.png'>SOMETEXT Car">SOMETEXT Car</option>
    <option data-content="<img class='list_img' src='https://cdn.pixabay.com/photo/2015/03/05/01/46/sailing-ship-659758_960_720.jpg'>SOMETEXT Boat">SOMETEXT Boat</option>
</select>

My goal is to remove the SOMETEXT when it's selected, so for example, if I choose SOMETEXT Car, I should only see the image and the text Car.

https://i.sstatic.net/fRuhv.png

htmlcssbootstrap-4bootstrap-select

Answer №1

In my proposal, I suggest updating the text when selected and loaded. To achieve this, a modification in the layout of the dropdown option is needed:

<img class='list_img' 
    src='https://cdn.pixabay.com/photo/2016/04/01/12/16/car-1300629_960_720.png'>
  SOMETEXT Car
/>

to

<img class='list_img' 
    src='https://cdn.pixabay.com/photo/2016/04/01/12/16/car-1300629_960_720.png'
/>
<span class="displayed-text">
  SOMETEXT Car
</span>

This change will create a placeholder on the dropdown toggler allowing for text replacement.

Additionally, it is advisable to assign the option value as the desired text to replace, like so:

<option data-content='...' value="car">
  SOMETEXT Car
</option>
<option data-content='...' value="Boat">
  SOMETEXT Boat
</option>

Subsequently, the loaded and changed event must be activated to update the text:

$(function() {
    let $select = $('.my-select').selectpicker();
    
    $select.on('loaded.bs.select', function (e, clickedIndex, isSelected, previousValue) {
        // $(this) is the actual <select />
        updateDropdownTitle($(this));
    });
    
    $select.on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) {
        // $(this) is the actual <select />
        updateDropdownTitle($(this));
    });
    
    function updateDropdownTitle($select) {
        let $dropdownToggler = $select.parent().find('.dropdown-toggle'),
            $title = $dropdownToggler.find('.filter-option-inner-inner'),
            selectedValue = $select.val();
        
        // Update the text to the value
        $dropdownToggler.prop('title', selectedValue);

        // Update the displayed-text span's text to the value
        $('.displayed-text', $title).text(selectedValue);   
    }
});

https://i.sstatic.net/2sxoQ.png


Here is a demo link showcasing the implementation: https://jsfiddle.net/davidliang2008/avhdzgf5/42/

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

Embed an external webpage within your own and make full use of its content

Is there a way to embed an entire new URL or page within my website element so that users can interact with it without having to refresh the main page? It's okay if the new content initially loads with a page refresh. Would jQuery.load() work? Or pe ...

phpjqueryhtmlajax

Validating group radio buttons that have been checked

I possess: <div class="group"> <input type="radio" name="myradio" value="1">a <input type="radio" name="myradio" value="2">b </div> <div class="group"> <input type="radio" name="two" value="3">a <input ty ...

javascriptjqueryhtml

Get notified via email when submitting a form on a PHP contact form

I am a front-end developer and do not have experience with PHP. I am trying to set up a contact form on my website using an example from htmldog. Here is the current code snippet: <form action="contact.php" method="post"> <div class="c ...

phphtmlemailpost

Display flash messages consistently in a designated area on the webpage instead of appearing at the top of the page in Flask

{% with messages = get_flashed_messages(with_categories=true) %} {% if messages %} {% for category, message in messages %} <div class="alert alert-{{ category }}" style=" ...

pythonhtmlcssflask

Manipulate PHP/SQL Form: Add, Remove, or Modify items

I have utilized the following code for managing a football fixtures and results administration website. The issue I am encountering pertains to the delete syntax (I suspect that there may be an error related to [ID]). Apart from that, everything else seems ...

phphtmlsqlsql-delete

Overlap of Navigation Bar and Carousel

Encountering an issue. I recently made a modification to my website in hopes of integrating a full-width carousel instead of a jumbotron. However, there seems to be a problem as my navbar is overlapping the jumbotron section along with the caption and oth ...

csstwitter-bootstrap

A dynamic 2-column website design featuring a mobile-friendly layout and an adaptable image

After searching through numerous resources on the topic, I have yet to find a solution to this particular challenge. Is it feasible to create a webpage layout with a text column on the left and an image column on the right that will seamlessly transition i ...

cssresponsive-design

Trigger the execution of the second function upon the successful completion of the first

In the following code, my concept is to display: The clicked kingdom (clicked_id) initiates an attack on (clicked_id). https://i.stack.imgur.com/Bx8QW.png https://i.stack.imgur.com/Cg2GL.png https://i.stack.imgur.com/gUNxM.png How can I trigger the sec ...

javascripthtml

The transformation rotation applied in CSS must not have any impact on the styling of my span and paragraph

Snippet: .details-section{ background-color: rgb(83, 83, 83); height: 200px; } .icon-container{ border: 2px solid #c49b63; width: 90px; height: 90px; transition: 0.5s ease; } .box i{ font-size: 60px; color: black; margin-top: 13px ...

javascripthtmlcssbootstrap-4

Tips for changing the dimensions of the canvas?

I'm struggling to display a photo captured from the webcam. The sizes are not matching up, and I can't pinpoint where the size is defined in the code. https://i.stack.imgur.com/Is921.png The camera view is on the left, while the photo should be ...

javascripthtmlcss

Ways to receive alerts when a marker enters a polygon

Looking for a way to receive notifications if my marker enters any of the polygons on the map. Having trouble implementing it correctly, here is my current code: <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com ...

javascriptjqueryhtmlcssgoogle-maps

Tips for creating responsive emails

Yesterday, I posted about my email newsletter and received some helpful feedback on creating a good structure. I implemented the suggestions provided into my newsletter and also added media query code to make layout adjustments for supported email clients. ...

htmlcssmedia-querieshtml-email

Aligning text appears fine in a full screen browser, but it can cause inconsistencies in appearance when resizing the window or viewing on a phone, as demonstrated in the

Hi there, I'm new to web design and I'm struggling to make my site look good on all screen sizes. I've created a page that should work well on any screen size: https://jsfiddle.net/garixakor/j0xck25v/1/ I attempted to center one of the par ...

htmlcssmedia-queriesmargincentering

jquery: centralizing progressbar growth on the page

Working with Bootstrap progress bars is a regular task for me, and I have included a small example below. var $progress = $('.progress'); var $progressBar = $('.progress-bar'); var $alert = $('.alert'); setTimeout(function() ...

jquerycss

Guide on reusing javascript to toggle between image sources

I have a simple website with buttons that, when clicked, change the image being displayed. However, I find myself repeating code for each button, and I'm wondering if there is a more efficient solution to this problem. Here is an example of what I cu ...

javascripthtml

One interesting characteristic of Javascript localStorage is that it overrides existing data instead of adding to it

I've been experimenting with localStorage to create new divs dynamically. Everything is going well, but I encountered an issue after reloading the page and clicking the bag button again. The previously created divs are being replaced by the new ones i ...

javascripthtmlsessionlocal-storage

Why is it that the edit or delete button is not functioning when I attempt to click on the next page?

Having an issue with my script. It works fine for editing and deleting on the first page, but when I navigate to the next page, those functionalities stop working. Can anyone help me troubleshoot this problem? <script> $(function(){ $(&ap ...

javascriptphphtml

Animating the appearance and behavior of radio buttons using CSS transitions and JavaScript

My jQuery code allows me to fetch attributes from the .item element, but I'm having trouble with my CSS transitions not working as intended. To see the desired transition effect, try replacing .item with .item-tile. How can I make my CSS transitions ...

jqueryhtmlcssradio-button

What is causing the container to overlap with my sidebar-like <nav>?

Why is the fluid-container overlapping in this way, while others are not? Does this look correct to you, or am I overlooking something? It seems incorrect to me. <nav class="nav flex-column float-left"> {links} </nav> <div class="conta ...

htmlcsstwitter-bootstrapbootstrap-4

What is the best way to animate an element to slide down when it is hidden with

I'm working on an html tag called "loginBox" (<loginBox> ... </loginBox>) that is initially hidden with display:none. When a user selects an option, I want it to smoothly slide down instead of just appearing and disappearing. How can I ach ...

javascriptjqueryhtmlcss