将标签添加到选择框（ <select> ）？

Question

I need to to add label inside select box using bootstrap as shown:

Before select an option

and after we select an option label should appear in small size

After select 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

See the live example 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>