I have following drop-down :
<select class="form-control">
<option value=1>Pooja Parikh</option>
<option value=2>Poorti Parikh</option>
<option value=3>Agent 2</option>
<option value=6>AWS Bot AWS Bot</option>
</select>
I want the above dropdown with a bootstrap badge, like following
<select class="form-control">
<option value=1>Pooja Parikh</option>
<option value=2>Poorti Parikh</option>
<option value=3>Agent 2</option>
<option value=6>AWS Bot AWS Bot <span class='badge badge-info'>Bot</span> </option>
</select>
when I tried the above code, its giving simple dropdown options with text only (not giving badge)
I was wondering if anyone one helps me out to implement the above.
Thanks
Related
currently working on an assignment and trying to code it to have titles as shown in the picture. Current code looks like this:
<section for="Pick up Location">Pick up Location:</label>
<br><br>
<select id="Pick up" name="Pick up">
<option selected disabled>Hogwarts</option>
<option value="Dining Hall">Dining Hall</option>
<option value="Chamber of Secrets">Chamber of Secrets</option>
<option selected disabled>Other</option>
<option value="Forbidden Forest">Forbidden Forest</option>
<option value="Hagrid's Shack">Hagrid's Shack</option>
</select>
Picture of what I need for formatting, Hogwarts and Other is how I want it to look
Looks like you had it, just have to take the selected off of the 2 disabled options!
<label for="Pick up Location">Pick up Location:</label>
<br><br>
<select id="Pick up" name="Pick up">
<option disabled>Hogwarts</option>
<option value="Dining Hall">Dining Hall</option>
<option value="Chamber of Secrets">Chamber of Secrets</option>
<option disabled>Other</option>
<option value="Forbidden Forest">Forbidden Forest</option>
<option value="Hagrid's Shack">Hagrid's Shack</option>
</select>
I am trying to hide the placeholder text in a dropdown menu from showing up as a selectable option. I have searched other options on stack overflow and tried the following solution but none have worked:
<option style="display:none" >Select Stop</option>
<option value="" disabled selected hidden >Select Stop</option>
<option value="" disabled selected style="display: none;">Select Stop</option>
My code looks like this which WORKS in stackoverflow but not when I put it into my site using latest version of chrome...
<select>
<option value="" disabled selected hidden>Select Stop</option>
<option value="home">home</option>
<option value="school">school</option>
<option value="office">office</option>
</select>
Not sure what are you actually trying achieve, to hide the select or option simply add disabled to them, see below, i have 2 select, one with option disbaled other one the entire select disabled
<select>
<option value="">Select Stop</option>
<option value="home" >home</option>
<option value="school" disabled>school</option>
<option value="office" >office</option>
</select>
<select disabled>
<option value="" >Select Stop</option>
<option value="home" >home</option>
<option value="school" >school</option>
<option value="office" >office</option>
</select>
Maybe you might want to add some JQuery into your file
$(function() {
$('.location').find('option:contains(office)').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='location'>
<option value="select stop">Select Stop</option>
<option value="home">home</option>
<option value="school">school</option>
<option value="office">office</option>
</select>
I have a simple HTML code (drop down) and for some reasons i want to display items on the right side without using a direction on select tag directly.
It works on fire fox but do not works on IE(ver 11).
I used these codes and css but it does not work
<select name="SelectedGroup" style="text-align:right" id="groups" >
<option value="">Select one</option>
<option style="text-align:right; " value="1">abcd#1</option>
<option style="text-align:right; direction:rtl;" value="2">abcd#2</option>
<option value="3">abcd#3</option>
<option value="4">abcd#4</option>
</select>
It works for me in IE11 using direction. try this
<select name="SelectedGroup" dir="rtl" id="groups" >
<option value="">Select one</option>
<option value="1">abcd#1</option>
<option value="2">abcd#2</option>
<option value="3">abcd#3</option>
<option value="4">abcd#4</option>
</select>
There is a requirement in my project like.,
I have select box in desktop view and in mobile only options has to be displayed.
I got stuck how to display all the options without selecting select box .
<h3>Desktop View</h3>
<select name="carmakes" id="carmakes">
<option selected='selected' value="0">Car makes</option>
<option value="bmw">BMW</option>
<option value="audi">Audi</option>
</select>
<br/><br/><br/><br/>
<h3>Mobile View</h3>
<option selected='selected' value="0">Car makes</option>
<option value="bmw">BMW</option>
<option value="audi">Audi</option>
Thanks
Demo
Just give multiple for your select box and it'll display like that...
<select multiple name="carmakes" id="carmakes">
<option selected='selected' value="0">Car makes</option>
<option value="bmw">BMW</option>
<option value="audi">Audi</option>
</select>
I am using bootstrap multiselect and Select with preselected options Cheese is not working? Why?
this is my html
<div class="input-group">
<!-- input type="text" class="form-control turnusdays infofield" id="turnusdays1"-->
<!-- div class="info"></div -->
<span class="input-group-btn">
<select class="multiselectDays turnusdays" multiple="multiple">
<option value="Pon">Pon</option>
<option value="Tor">Tor</option>
<option value="Sre">Sre</option>
<option value="Čet">Čet</option>
<option value="Pet" selected>Pet</option>
<option value="Sob">Sob</option>
<option value="Ned">Ned</option>
<option value="Vikend">Vikend</option>
<option value="Praznik">Praznik</option>
</select>
</span>
</div>
What is the error you are getting ? If its MVC then use Listboxfor for multiselect.
Updated
!
Code here is :
<select multiple="multiple" style="width:500px;height:300px">
<option value="Pon" selected>Pon</option>
<option value="Tor">Tor</option>
<option value="Sre">Sre</option>
<option value="Čet">Čet</option>
<option value="Pet" selected>Pet</option>
<option value="Sob" selected>Sob</option>
<option value="Ned">Ned</option>
<option value="Vikend">Vikend</option>
<option value="Praznik">Praznik</option>
</select>
Remove the div and span class and try only the select option.