In the Bootstrap multiselect feature, users will be able to choose whether to display an image or selected text

Is there any way to display an image by default instead of options?

Code:

 <select id="example-post" style="width:120px;!important;" class="footerSelect" name="multiselect[]" multiple="multiple">
                                            <option value="1">test</option>
                                            <option value="2">test1</option>
                                            <option value="3">test2 </option>             


 $('.multiselect-selected-text').text('Options');

I would like to display an image as the default selection here.

javascriptjquerycsshtmltwitter-bootstrap

Answer №1

Give this a shot...

<div class="float-left">
    <div class="float-right">
        <div class="button-group">                 
                <a class="button button-small dropdown-toggle" data-toggle="dropdown" href="#">
                    <span>Options</span>
                    <span class="arrow"></span>
                </a>
                <ul class="dropdown-list">
                    <li class="confirm"><a href="#">Selection 1</a></li>
                    <li><a href="#">Selection 2</a></li>
                    <li class="confirm"><a href="#">Selection 3</a></li>
                    <li class="line"></li>
                    <li><a href="#">Selection 4</a></li>
                    <li><a href="#">Selection 5</a></li>

                </ul>
            </div>
    </div>
</div>

@import url('http://designerwebsite.com/styles/bootstrap.css');

.content {
    margin-top: 15px;
}

.dropdown-list li:nth-of-type(1) { 
    background-image: url("http://images.example.com/32x32icon.png") !important; 
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-position: 3px 5px;
    padding-left: 5px;
}

.dropdown-list li:nth-of-type(2) { 
    background-image: url("http://images.example.com/32x32icon.png") !important; 
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-position: 3px 5px;
    padding-left: 5px;
}

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

The ng-model feature is unable to properly save data within a nested ng-repeat function for a 2-dimensional array

I'm currently working with a nested ng-repeat on a 2d array and have added ng-model to the third ng-repeat. However, I am encountering an issue where my ng-model is not properly storing the data within the object. JavaScript Code emrService .getDat ...

htmlangularjsmultidimensional-arrayangularjs-ng-repeatangular-ngmodel

Utilizing libraries in JavaScript

For a while now, I've been grappling with an issue related to importing modules into my main JavaScript script. I recently installed the lodash library via npm and I'm trying to import it into my main script so that I can utilize its functionali ...

javascriptnpmimportlodash

Passing data between API tests in JavaScript

I'm encountering an issue where I need to create e2e api tests. The goal of the first test is to obtain a token for an unauthorized user, use that token in the method header for the second test to return a token for an authorized user, and then contin ...

javascriptapitestingmocha.js

Tips for increasing a cell in AG Grid React table:

Just starting out with the AG Grid library and encountering issues when updating the cells. To simplify, I will describe my problem using basic numbers instead of dates. Start is set to 1. Stop value is already established. End needs to be determined. Dur ...

javascriptreactjsag-gridag-grid-react

To properly handle this file type in React, ensure you have the correct babel loader installed

An error is triggered when trying to compile with webpack. The message indicates that an appropriate loader may be needed to handle this file type. The libraries I am using are: Below are my project files: package.json { "name": "react", "version": ...

javascriptnode.jsreactjsnpmwebpack

Create a triangular shape to fit on the right side of a 'li' element

After defining the following HTML: <ul class="steps d-flex"> <li class="step">Basic Details<div class="triangle triangle-right"></div></li> </ul> With this given CSS: .steps li { @ex ...

htmlcsssassbootstrap-5

How can you locate the position of identified text on a webpage to accurately place the mouse cursor there?

When browsing a webpage in my web browser (preferably Firefox), I have the ability to search for a specific text "abc" using ctrl+f. Once found, I need to move my mouse cursor to another relative position on the page and click. Unfortunately, the necessar ...

javascripthtmlscripting

Cordova does not support the transform property

In the process of creating an Apache Cordova app using the Ionic framework and working with Phonegap Build, I encountered a challenge. The main page of my app features rows of icons that appear like this: However, there is a problem on Android 4.4.x and o ...

javascriptandroidcsscordovaionic-framework

Incorporate a Bootstrap panel featuring a stylish border design and perfectly centered text

I am attempting to design two panels in Bootstrap with centered text and different fonts. Similar to the layout shown in the image below https://i.sstatic.net/aVGwV.png Here is my code: <div class="row"> <div class="col-lg-6&q ...

cssbootstrap-4

transferring data from ejs template

In my app.js file, I have an array that stores files. To display these files on a website, I use a for-loop in ejs: <% for(let i = 0;i<posts.length; i++){ %> <li class="listtitle"> <%= posts[i].title %> </li> ...

javascriptnode.jsexpressejs

Having trouble with changing images or background images in JavaScript?

Encountering issues with dynamic elements. When I click a button, the following JS function is executed. It displays a stylish CSS alert upon postback and then runs the function. function scrollToTop(sender, args) { window.scrollTo(0, 0); document. ...

javascriptjquerycssimage

Accessing Data from Nested PHP Array in Javascript

My current situation is this: I have a MYSQL database that consists of two fields: 'ID' and 'string'. The 'string' field stores serialized arrays. To extract the data back, I utilize the following PHP code: $result = mysql_q ...

phpjavascriptmysqlajax

I'm struggling to find a way to showcase my JSON data in HTML. Update: I have a clear vision of how I want it to look, but I'm struggling to display it in any format other than raw JSON

I've been trying to figure this out for hours, scouring every resource I can find, but I'm stuck. I've left the API URL in there, so feel free to take a look (it's public). If my message doesn't make sense due to exhaustion, please ...

javascriptphpjqueryjsonapi

Error: Accessing Undefined Property in Node-SQLite

I recently started developing a REST API for garden-related data collected by an Arduino using node-sqlite3. Basic queries like retrieving all the database information are working fine. However, I am facing challenges when trying to retrieve data based on ...

javascriptnode.jssqlite

Incorporating a hyperlink into a ReactJS object's value

I have a ReactJs app with an object containing English translations. Is it possible to make the word "here" in the paragraph a clickable link by adding the URL of description.href? I tried adding it as HTML, but it rendered as text. const EnMessages = { ...

javascriptreactjs

Text Embedded in Object HTML

Feeling stuck and need some guidance. My goal is to insert text inside hexagon shapes, but I'm having trouble making it work. I can change the background-color of the hexagons, add URLs, etc., but adding text seems to be a challenge. Check out the co ...

html

Is it feasible to block indent the second line of a URL?

Is there a way to indent a second line of a URL so that it aligns perfectly with the first letter of the sentence? I attempted using <ul>, but encountered issues as it inherited small text and bullet points from the main .css file. Check out this li ...

css

Dropzone failing to verify the maximum file limit

I am currently using dropzone to upload files on my website. I have limited the number of files that can be uploaded to a maximum of six. The code works perfectly when uploading one image at a time, but if I select more than six images by holding down the ...

javascriptjqueryhtmldropzone.js

Variables disappearing after hiding the flash application

In the div, I have a flash file embedded. This div is initially visible with display:block;. There are two other sister divs alongside this one. All three divs are controlled by jQuery tabs, which means when a different tab is clicked, the current visible ...

htmlcssflashdata-loss

Preserving distance between absolute elements

I'm facing an issue with my menu animation using jQuery. In order to achieve the desired effect, I am forced to use position: absolute. My challenge is maintaining consistent spacing between each text string, especially since they vary in width. Unfor ...

jquerycssanimation