I am using the select2 plugin and I like to change the text color on some options like this:
<select class="js-example-basic-single">
<option>item 1</option>
<option style="color:red">item 2</option>
<option>item 3</option>
<option style="color:red">item 4</option>
</select>
But when I execute the page, the style not works.
If you want to edit the appearance of your options you need to use the templating options of the select2
You will need to do something like this:
$('.js-example-basic-single').select2({
templateSelection: function(data) {
return $('<span style="color:red">' + data.text +'<span>');
}
});
Be aware that if you only want some options to be red you will need to do the checks inside the function.
Hope this helps.
Related
I am trying to display the first 5 options as default in rendering select2.
Select countries
____________
America
Canada
England
France
Spain
I made it multiple and used selected, so it could display but not as straightforward like the above.
How can I set it up like this?
I used the open option, so it displays them like above.
$('#id').select2('open')
However, when I click on anywhere on the screen, it closes. How can I keep it open all the time?
Lets say that your Dropdown HTML is like below:
<select multiple="multiple" id="s1" style="width: 300px">
<option value="1">America</option>
<option value="2">Canada</option>
<option value="3">England</option>
<option value="4">France</option>
<option value="5">Spain</option>
</select>
If you want to always keep Open the dropdown, you can use following code. This prevents the closing by overriding the callback method.
$(doucment).ready(function() {
var list = $('#s1').select2({
closeOnSelect: false,
}).on("select2:closing", function(e) {
e.preventDefault();
}).on("select2:closed", function(e) {
list.select2("open");
});
list.select2("open");
});
Please see the working JSFiddle
I have a simple select like this:
<select [style]="{width : '100%' }" [(ngModel)]="rule.valoreImmesso" class="lm-custom-dropdown">
<option *ngFor="let valore of rule.comboValues" [value]="valore.value">{{valore.label}}</option>
</select>
I want to add an input text inside the dropdown in order to filter the options. Is it possible? How to do it?
You can do like this
<input type="text" list="cars" [(ngModel)]="rule.valoreImmesso"/>
<datalist id="cars">
<option *ngFor="let valore of rule.comboValues" [value]="valore.value"></option>
</datalist>
But datalist tag not supported in Safari So you must write a custom dropdown on your own. You can find some in the internet and modify them as you desired.
I am try to use custom multiselect on iOS, using jquery mobile 1.3.2, but when I set the flag data-native-menu=false, nothing happens, no native select is used, and certainly no custom select pops up, nothing. here is the code
<select name="poimain_category_select" id="poimain_category_select" multiple="multiple" data-native-menu="false" data-placeholder="true"">
<option id="poinmain_category_select_holder" value=""><%print(T('SELECT_CATEGORY'))%></option>
<%print(poidata['category_data'])%>
</select>
I had the same problem with tapHold. I added "-button" to my id when binding and it worked.
From HTML-file:
<select id="selectVaapen" data-native-menu="false" data-inline="false">
<!-- Empty -->
</select>
From javascript-file:
$(function() {
$("#selectVaapen-button").bind('taphold', function(event) {
console.log("tapholdHandler");
});
});
I'm creating a web form using JQuery.
I want to copy previous select fields into another select field using a link. i have it changing the DOM, the value of select1.selectedIndex is changed. however it still visually displays the old value. apparently you need to refresh it so it visually updates. I don't understand the syntax of the refresh method i keep reading around. This is how I tried to do it and it doesn't work.
this is the html for the link
<select name="entry.14.single" id="entry_14">
<option value="1"></option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option></select>
<select name="entry.16.single" id="entry_16">
<option value=1""></option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option></select>
Same as above
here is my javascript:
function setSelect(id1, id2){
var select1 = document.getElementById(id1);
var select2 = document.getElementById(id2);
select1.selectedIndex = select2.selectedIndex;
$('#select1').selectmenu('refresh');
}
can someone please tell me why my refresh statement is not working?
p.s. i know there are other threads on the same issue, i have also read the 'documentation.' please dont link me somewhere else. I have read other sources and its not getting me anywhere. Please just show me what to change in order to get the refresh working properly.
EDIT: heres a jsfiddle you can mess around on
http://jsfiddle.net/AFzqt/7/
Utilize jQuery event handlers!
The function you are looking for is:
selectmenu("refresh")
In your example, it would look something like this:
$(function() {
$("#changeButton").on("click", function(e) {
$("#entry_16").val($("#entry_14").val());
$("#entry_16").selectmenu("refresh");
e.preventDefault();
});
});
http://jsfiddle.net/AFzqt/8/
We have the following HTML:
<option value="4def1b88a1247">Text</option>
When using jquery-ui select menu, the option is changed to:
<span class="ui-selectmenu-status">Text</span>
How do we get a jquery-ui selectmenu option to link to another page? We have tried onclick, but this also gets removed when the select menu is re-written.
We just want our options to link to pages without the need of a form to be submitted, is this possible with jquery-ui selectmenu?
Define your select element:
<select id="my_menu">
<option value="/page1.html">Go to Page 1</option>
<option value="/page2.html">Go to Page 2</option>
</select>
And then use the change event to fire the link:
$('#my_menu').selectmenu({
change: function() {
if($(this).val() != '') {
window.location = $(this).val();
}
}
});
According to the documentation here, https://github.com/fnagel/jquery-ui/wiki/Selectmenu, there are callback events that can be used. You mentioned that you tried onclick...perhaps using the change and select callbacks will work instead?
The documentation is from the Felix Nagel version of the plugin by the way, which the FilamentGroup people say on their page is an improved version of there's.