I'm unable to set an initial value for a select2 v4.0.1 instance; the select is being created with tags: true.
HTML:
<select id="tags" name="tags" class="form-control" multiple></select>
JS:
$('#tags').select2({'tags': true});
Tried with:
<select id="tags" name="tags" class="form-control" multiple>
<option selected>{{ tag }}</option>
</select>
and:
$('#tags').select2({'tags': true});
$('#tags').val(["test"]).change();
and other smaller variations, to no avail :'(
This documentation snippet seems to have a lead: https://select2.github.io/announcements-4.0.html#removed-initselection but is very confusing, I'm a new user of select2.
According to older posts, this is not an issue at all with the older select2 3 series, but it includes hidden input issues and other nasty stuff.
Does anyone know what I'm missing?
Answering myself :)
Found two viable slightly different ways:
Add static child <option> elements
<select id="tags" multiple="multiple" autocomplete="off">
<option selected>test1</option>
<option selected>test2</option>
</select>
<script type="text/javascript">
$('#tags').select2({tags: true});
</script>
Dynamically add child <option> elements, then trigger a change
<select id="tags" multiple="multiple" autocomplete="off"></select>
<script type="text/javascript">
$('#tags').select2({tags: true});
$('#tags').append("<option selected>test1</option><option selected>test2</option>").change();
});
</script>
The val() method works only for selecting an option, not for adding/removing options to a select multiple.
Related
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.
There are three frames, in second frame i have loaded all the required js and css files, but still select is not stylised. I added $('.change-theme-wrapper').trigger('create'); It did styled but the select was not opening. And its giving TypeError: r[0] is undefined. Same html code works in other frame but not in this frame. js libraries are loaded in head and other js libraries loaded in body. Please help me.
HTML:
<div class="change-theme-wrapper" data-role="fieldcontain">
<select data-theme="b" id="change_theme" data-native-menu="false" data-mini="true" data-icon="gear">
<option data-placeholder="true" value="">Change Theme</option>
<option value="b">Blue</option>
<option value="a">Black</option>
<option value="c">Silver</option>
<option value="d">Plain White</option>
</select>
</div>
Javascript Version:
jquery-min v1.8.2
jquery-mobile v1.2.0
You need to refresh the select menu after initializing it. Use this code after executing trigger. Hope this will solve your problem.
$('#change_theme').selectmenu('refresh');
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 would like to use Autocomplete script from jquery-ui.min.js. So in code I have:
<select id="country"><option value="">Choice one</option>
<option value="1">US</option>
<option value="2">UK</option></select>
<input type="text" id="city" >
And the script:
<script>
$(function() {
var US= ["City1", "City2", "City3"];
var UK= ["UK_City1", "UK_City2", "UK_City3"];
$("#city").autocomplete({
source: US
});
});
</script>
The question is how to change source dependent on user selected text from Select ID="Country"? Here is also this script: http://jsbin.com/adopo3/35/edit
Simplest way is to use option method to change the source. I have modified your example code to illustrate it here.
Another way would be to supply callback function to the source option. See that here
I have 1 slider and 1 button:
<div data-role="fieldcontain">
<input type="range" name="slider" id="slider" value="0" min="0" max="100" />
</div><br><br>
<div data-role="fieldcontain">
<select name="slider" id="slider" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
How can I POST (like form action="http://somesite" method="post"), when slider's value is changed? button is pressed?
One solution would be to add a custom data attribute that enables the input to auto submit the form it is child of.
Format of such an attribute could be:
<select name="slider" id="slider" data-role="slider" data-autosubmit="true">
<option value="off">Off</option>
<option value="on">On</option>
</select>
The jQuery code to enable auto submit is as easy as below, but we need to make it a bit more complicated for the slider, see the fiddle sample in the end for that.
$('[data-autosubmit="true"]').change(function(){
$(this).parents('form:first').submit();
});
I don't know if you use the native jQuery mobile form handling or a custom one, but if you want to use a custom hook on the submit it could look something like this:
$("form").submit(function() {
//Handle the submit with a jQuery.post or whatever
});
Here is a fiddle with some running sample code: http://jsfiddle.net/4VFgS/1/
The fiddle code got some handling to prevent that you submit the form 100 times per second.
$('#slider').change(function(){
...
$.post(yoururl, yourdata, function(callbackdata){
...
});
});
See jQuery.post() and jQuery.change()
Edit: BTW: Having 2 elements with the same id will likely lead to major problems sooner than later.
Edit 2: If you're trying to get a response from a different domain this way, you're probably out of luck unless they offer you JSONP or the like. You will not be able to fetch content from a 3rd party site via XMLHttpRequest because of Same Origin Policy Limitations.
You could proxy the request through your server, though, so the AJAX call would go to the same domain.