I am trying to build a selectpicker using Bootstrap 5 with optgroups. My issue is that under each optgroups, all option elements are identical and do not match the HTML I have written in my file. The issue is apparent even when we have something very simple and boiled down, such as this:
<select class="form select selectpicker" multiple id="simple">
<optgroup label="Fruits">
<option>Cherry</option>
<option>Papaya</option>
</optgroup>
<optgroup label="Vegetables">
<option>Lettuce</option>
<option>Tomato</option>
</optgroup>
</select>
What this displays is a selectpicker with two optgroups, Fruits and Vegetables, but where both optgroups have the "Cherry" and "Papaya" options. It seems to be using the options from the first optgroup and pulling these into any subsequent optgroups within the select element. Any help with resolving this would be greatly appreciated.
That is exactly the same problem i am facing right now. I am using Bootstrap 4. If i find a solution i will post it here.
edit:
Ok i fixed it for me.
I switched the bootstrap-select version and now it is working.
Now i am using bootstrap-select.1.14.0-beta3.
Related
I want to create a select that looks like a collection in Materialize CSS.
I know that in order to do something like that on plain HTML I need to use the size attribute.
<select id="someSelect" size="8">
<option value="3">Blabla</option>
<option value="4">Bla</option>
...
</select>
Howhever, when I add it, it doesn't change anything, and the select is still a dropdown and not a list.
How could I create a selectable list (only one selection at a time) in Materialize CSS?
EDIT:
bahman parsamanesh mentioned in his comment the usage of <div class="collection"> and <a> inside it, which is exactly I was looking for, but how could I handle it's onChange?
I am using Ionic Framework.
I would like to enter the first option as the default, but doing it this way does not work.
What can I do?
<select ng-model="newSpesaAereo.valuta">
<option ng-selected="selected">Euro</option>
<option>Dollaro</option>
<option>Dollaro canadese</option>
<option>Sterlina</option>
</select>
If I analyze the page with Google Chrome Developer Utility I watch this.
If I edit this HTML and I delete the selected row, then Euro is visible.
Why is this happening?
Set ng-selected="true".
Example:
<option ng-selected="true">Carta di credito</option>
The reason the default option isn't working is because, in your controller, you've likely initialised your form model like so:
$scope.newSpesaAereo = {}
If you want to set default form options, you should also set them in the form model. For example, set 'valuta' to 'Euro' like so:
$scope.newSpesaAereo = { valuta: "Euro" }
I hope this helps!
P.S when posting issues like this you should also include the code for the controller that the view is bound to.
You need to use ng-selected instead of just selected.
https://docs.angularjs.org/api/ng/directive/ngSelected
<select ng-model="newSpesaAereo.metodoPagamento">
<option ng-selected="selected">Carta di credito</option>
<option>Bancomat</option>
<option>Contanti</option>
<option>Altro</option>
</select>
Ok, so I've been researching for some time now, without any luck, a way to to access different areas of a single page from a list of links in a dropdown sub-menu that currently contains five (5) working links that go to different pages.
What I'd like to do is keep the separate links for each piece of content, but combine the information from these pages to a single page and then link those specific areas from the existing dropdown menu / sub-menu links.
Can this be done? I understand about anchor tags and have tried to see how I can use them here but it doesn't appear to be an option since I'm not trying to link from within a page, rather from sub-menus in a dropdown menu?
Any thoughts or ideas would be greatly appreciated, if this is in fact possible! Thanks...
BTW: not sure if it's going to make a difference, but this site is in WordPress.
Use jquery and following code
HTML:
<select id="_selectPlatform" name="_selectPlatform" onChange=selectPlatformChange();>
<option value="default">Select</option>
<option value="Android">Android</option>
<option value="Blackberry">BlackBerry</option>
<option value="IOS">IOS</option>
<option value="Others">Others</option>
</select>
and script code
function selectPlatformChange() {
var _selectPlatform = $('#_selectPlatform').val();
if (_selectPlatform == 'Android') {
window.location.href = 'androidpage.html';
}
}
it will work
I want to ask about html dropdown menu. As we know, that option tag in html only support text. However, I need to create a drowp down menu that show list of image. I've searched for it. And I found several ways, including using css or jquery. However, that's not what I want. Here is, what I want to create:
<option value = blablabla><img src = "img/blbalba.txt"></option>
The code above is not working. Is there any sugestion to display dropdown menu like that?
Thank you for your help.
As You can't do that in plain HTML, but you can do it with JQuery.
Right now You can do like this
<select>
<option value="img1" style="background-image:url(images/img1.png);">image 1</option>
<option value="img2" style="background-image:url(images/img2.png);">image 2</option>
<option value="img3" style="background-image:url(images/img3.png);">image 3</option>
<option value="img4" style="background-image:url(images/img4.png);">image 4 </option>
</select>
Browsers will only render text inside a select tag, so, if you wan to use a selector that shows images instead of text, you cannot use a select you'll need to build your own selectable object.
That could be quite difficult to do. You can use different premade solutions that people on your situation developed before or try to reinvent the wheel.
Check this :)
A free light weight jQuery plugin that allows you to create a custom drop down with images and description.
What is so cool about this plugin!
Adds images and description to otherwise boring drop downs.
Allows JSON to populate the drop down options.
Converts your HTML select element to ddSlick.
Uses Minimum css and no external stylesheets to download.
Supports callback functions on selection.
Works as good even without images or description!
http://designwithpc.com/Plugins/ddSlick#demo
I have a select menu like this:
<select name="mySelect">
<option value="250" selected="selected">250</option>
<option value="500">500</option>
<option value="1000">1000</option>
<option value="1500">1500</option>
</select>
It comes out looking different depending on OS and I would like it to have a different background. The problem is when I use a standard css background the arrow on the right of the select element remains visible.
select {
background: url(../images/bg_select.png);
}
I would also like to have different background colours when the select list has been opened. The default is often blue and white.
Edit: Looks like I'll have to use javascript. Are there any jQuery plugins to do this?
You may want to look at this: Cut & Paste DHTML Select menu. It uses Javascript to replace the select menu with custom HTML.
all a listener to the select and use jquery to trigger the class
add/remove classes should work fine