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/
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 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.
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'm working on a phonegap project: 1 html page with 3 (data-role) pages.
One of them contains a select-list with a placeholder.
When the user selects a value in the dropdown, navigates away from the page and comes back, the selected value remains visible.
How can I initialize the list back to the placeholder (without making the placeholder an actual value in the list)?
HTML
<label for="cadeauvoor">Idee voor</label>
<select id="cadeauvoor" name="cadeauvoor">
<option value="" data-placeholder="true">Kies...</option>
<option value="Anne">Anne</option>
<option value="Arno">Arno</option>
<option value="Christophe">Christophe</option>
<option value="Dirk">Dirk</option>
</select>
JS
function InitNieuweTip() {
$("#cadeauvoor").val('');
};
You can bind it to either pageshow or pagebeforeshow:
$(document).on('pagebeforeshow', '#page_id', function () {
$('#cadeauvoor option:eq(0)').prop('selected', true);
$('#cadeauvoor').selectmenu('refresh');
});
Where option:eq(0) is the first option (placeholder) in selectmenu.
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");
});
});