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
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 am using jQuery UI controlgroup to style checkboxes in an HTML form. After the input values are processed by a PHP script, the results are displayed on the the same page along with the form itself, so that the user can adjust the filters. What I am trying to do, is to have the boxes that were checked previously remain checked after the form has been processed, so that the user sees what selection criteria were used. To achieve that I store all the PHP $_POST data in a JS variable using json_encode, which I'd like to use to iterate through the labels and mark those that were checked previously. The problem is that the only option of the controlgroup widget that I can use is classes with ui-controlgroup-item which shows every single label within the group as active, and for the life of me I cannot figure out how to make it conditional, e.g. so that I can use if(label[for=' + var.value +'])', var being <?php echo json_encode($_POST) ?> or something similar. Will appreciate any suggestions.
Here is the HTML:
<div id="currencyList">
<label for="gbp">GBP</label>
<input type="checkbox" value="gbp" name="currency[]" id="gbp" >
<label for="usd">USD</label>
<input type="checkbox" value="usd" name="currency[]" id="usd">
<label for="eur">EUR</label>
<input type="checkbox" value="eur" name="currency[]" id="eur">
</div>
And this is the JavaScript bit:
$( "#currencyList" ).controlgroup({
classes: {
"ui-controlgroup-item": "ui-checkboxradio-checked ui-state-active"
}
});
After trying to find a solution for several days I decided to skip trying via the classes option and instead to move outside the controlgroup widget. So here is my not-so-pretty-but-working solution:
var postData = <?php echo json_encode($_POST) ?>;
$( "#currencyList" ).controlgroup();
$('#currencyList').children('label').each(function () {
if(postData.currency.indexOf($(this).attr("for")) >= 0){
$(this).addClass( "ui-checkboxradio-checked ui-state-active");
}
});
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.
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");
});
});
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.