Is it possible to incorporate a label within a dropdown menu (<select>)?

How can I add a label inside a select box using Bootstrap? Here is an example:

Before selecting an option

After selecting an option, the label should appear in a small size like this:

After selecting an option

:

<div class="form-group">
    <label for="sector">Sector</label>
    <div class="label form-label-group">
        <select class="form-control" id="sector">
            <option>Civilian</option>
            <option>Officer</option>
            <option>Retirement</option>
        </select>
    </div>
</div>

Answer №1

Take a look at the interactive demo below:

$('#sector option[value=temp]').hide();
$('#sector').change(function() {
  $('#sector option[value=temp]').show();
 $("#sector option[value=temp]").css("font-size", "small");
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<div class="form-group">
  <label for="sector">Sector</label>
  <div class="label form-label-group">
    <select class="form-control" id="sector">
      <option disabled value="temp">Sector</option>
      <option value="Civilian">Civilian</option>
      <option value="Officer">Officer</option>
      <option value="Retirement">Retirement</option>
    </select>
  </div>
</div>

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

Alter the color of the text within the `<li>` element when it is clicked on

Here is a list of variables and functions: <ul id="list"> <li id="g_commondata" value="g_commondata.html"> <a onclick="setPictureFileName(document.getElementById('g_commondata').getAttribute('value'))">Variable : ...

Exploring the world of asynchronous operations with React Hooks

Hello, I am a beginner when it comes to React and JavaScript. I could really use some assistance with two hooks that I have created: useSaveStorage and useGetStorage. The issue I am facing is that my app is supposed to receive data and save it into AsyncS ...

Using Material-UI to add a pseudo class '::before' with component class properties

I attempted to utilize a pseudo class for the mui-app-bar but did not have success. I've researched this issue on various platforms without finding a solution. Below is how my component is currently structured: const styles = (theme: Theme) => cre ...

Ways to fill ng-style with a CSS object

Creating a dynamic form to manipulate CSS properties in real time has been my latest project. I've managed to define the CSS property names and values within an object, but now I'm struggling to style the item elegantly on the page as the user in ...

Unraveling the Distinctions: Identifying an Admin vs. a User within the API

When working with the express framework, I encounter a situation where I need to restrict access to certain API endpoints. For example, I have this line in the API: router.delete('/user',(req, res) => { //deleting...} Now, I want only an Adm ...

I am having issues with the Load More Posts Ajax Button on my WordPress site and it is

I'm trying to display more posts when a button is clicked. Upon inspecting and checking the network, everything seems to be working fine, or at least that's what I assume. https://i.sstatic.net/44VS1.jpg https://i.sstatic.net/KEkiz.jpg I&apos ...

Encountering a problem when trying to utilize material-ui icons in a React application

After installing the Material-UI core and icons packages using npm install @material-ui/core and npm install @material-ui/icons in my React app, I tried to use the FileUploadIcon. Here's how I imported it: import { FileUploadIcon } from '@materia ...

Experience a captivating Bootstrap 4 drop menu animation that emerges from beyond the borders of the page

I have a row that contains two divs, one with col-md-11 and the other with col-md-1. Inside the col-md-1 div, there is a dropdown that I want to animate. I am using animate css for the animation, but the issue is that the slideInRight animation starts from ...

Troubleshooting a Jquery example that fails to run on popular browsers like IE, Chrome, and Firefox

I've been struggling to get this particular example to function properly (using vs2010): <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD X ...

perform an action in PHP when a button is clicked

I'm currently developing a PHP admin panel that displays a list of users in an HTML table format. Each row in the table includes a button that allows the admin to send a notification to the selected user. Below is the code I used to create and displa ...

Creating an application for inputting data by utilizing angular material and javascript

I am looking to create an application using Angular Material Design, AngularJS (in HTML), and JavaScript. The application should take input such as name, place, phone number, and email, and once submitted, it should be stored in a table below. You can fin ...

Unable to launch React Native project on emulator now

Something seems off with my App as it won't start up on my AS Emulator. Everything was running smoothly yesterday, but today it's not working - possibly due to me moving the npm and npm-cache folders, although they are configured correctly with n ...

What is the best way to convert HTML into a React component?

This is the situation I am facing : 1) The application requests a CMS (Content Management System) for page contents. 2) The CMS responds with "<div>Hi,<SpecialButton color="red">My Button</SpecialButton></div>" 3) The applicat ...

Tips for preventing JavaScript errors when making cross-domain requests using AJAX

Is there a way to prevent or handle JavaScript errors without causing the script to crash? Error message: No data returned $.ajax({ type : 'GET', dataType : 'jsonp', url : '//cvrapi.dk/api?search=dsfsdfsd&country= ...

Learn how to retrieve data by clicking on the previous and next buttons in FullCalendar using Vue.js

Seeking guidance on retrieving calendar data from the database for my Vue frontend, I have incorporated the fullcalendar API. Successfully able to retrieve data for the current week, however facing challenges when attempting to fetch data for the previous ...

Exploring the Positives and Negatives of Using JQuery and Glow JavaScript Libraries

Is there a detailed analysis available that compares JQuery with the BBC's Glow JavaScript libraries? ...

finding the relative path based on a given URL

Struggling to extract a relative path from a URL. For example, from , I want to get /my/path. I attempted the following: url = 'http://test.com/my/path'; console.log(url.replace(/^(?:\/\/|[^\/]+)*/)); Unfortunately, I am only ...

Determine the dynamic height of content in a TypeScript file

Could you please provide guidance on obtaining the height of the content within this particular div element? For example, I need to calculate the dynamic height of the content. code .html <div class="margin-top-47 margin-horizontal-10" #hel ...

Designing a collection of inline divs that automatically stretch to fit the parent container, while also wrapping to a new line if the minimum width is reached

Welcome to my first post on this platform! I love a good HTML challenge, but I'm stumped on this particular issue and could really use some help. Thank you in advance to anyone who can assist. What I am trying to achieve is to create a series of inl ...

Is the useNavigate() function failing to work consistently?

Currently facing an issue while working on a MERN Web App. When logging in with an existing account, the backend API call returns user properties and a JWT Token. Upon saving it, I use the navigate function to redirect the User to the homepage. Everything ...