I'm trying to build some kind of currency converter and I have two select menus with the list of currencies.
I want to create a button that when clicked, it will switch the selection between the "from" select menu and the "to" select menu.
how do I implement it using the select menus I already have?
I believe you'r looking for a swap behavior.
http://jsfiddle.net/brentmn/D55Dm/
$(function(){
var $sel1 = $('#currency1');
var $sel2 = $('#currency2');
$('input[type=button]').click(function(){
var val1 = $sel1.val();
var val2 = $sel2.val();
$sel2.val(val1);
$sel1.val(val2);
//jqueryui
//$sel2.val(val1).trigger('change');
//$sel1.val(val2).trigger('change');
});
});
Something like this?
$("#button").on("click", function() {
var from = $("#from").val();
var to = $("#to").val();
$("#from").val(to);
$("#to").val(from);
});
I'd really do it with less code than that, but have done it like that for readability.
Assuming I've understood you correctly, you want a button that will swap the values of two select elements. If that's right, try something along these lines:
$("#someButton").click(function() {
var elemTo = $("#to"),
elemFrom = $("#from"),
toVal = elemTo.val();
elemTo.val(elemFrom.val());
elemFrom.val(toVal);
});
It simply gets references to the two select elements (assumed here to be #to and #from), gets the value of one of them, replaces the value of that one with the value of the other, and then replaces the value of the second with the stored value from the first.
Note that this assumes both select elements have the same option values. If an option is present in one select but not the other, it would not work.
Here's a working example.
If you dbl click on one item in 'From' section , it will get selected be appended to the 'To' section.
$("#selectFrom").dblclick(function(){
$selectTo.append($selectFrom.children(":selected"));
});
Which all functionalities you want??
Related
I have and issue that i can't wrap my head around, so i hope i could get some help and new knowlage to use.
i am building a form, where the user needs to book an item, but once selected i will not have it been able to be selected again.
so what my plan was, is to have a dropdown menu , that you can select what ever from, if you want one item more , you click a button and get a new dropdown menu, allowing you to select a new item, but this new dropdown, should not contain the item from the first dropdown.
i had tried to build a thing like this
$(function() {
$('.dropdown').change(function() {
dropdownvalue = $(this).val();
$('.dropdown').not(this).find('option[value="' + dropdownvalue + '"]').remove();
});
});
https://jsfiddle.net/loonitun/tya85x4j/2/
How ever, if my user changes mind, the option is now gone, even if something else is selected ( i know it is the Remove part in the javascript, but i am unsure how to restore the previous option )
if anyone have an solution, or some guidence to how i can get it done i would apreciate it very much.
an alternative solution i had in my mind, that may work, was to do an onchange add to array, but then i would need another dropdown to remove items from that array, and i think that may confuse the user.
What you want to do is - filter your options when you select someting instead of removing them from the array.
for example
let options = [1, 2, 3, 4] // this is an array of options with ids
let valuesSelected = []; // once you choose a value from the dropdown you need to push it to valuesSelectedArray
Every time you choose something in a dropdown you need to filter this value out of you options array
options.filter(option => !valuesSelected.includes(option))
this will give you array of options without values you already selected.
I was using select Person_name = $('#selectedPerson').val()
person_name.length is showing 2 if selected 2 values.
Now i have changed to check boxes which is in table. If i am using person_name= document.getElementById("selectedPerson").innerText, person_name.length is not working. It is taking length of the content. I want to count of the person and it is value which i am selecting in check-boxes.
Thanks,
Raja.
Side note: an ID should only ever be applied to one element, so you want .selectedPerson not #selectedPerson if it's going to select two things.
var people = $('.selectedPerson');
var count = people.count;
var name = people.text();
I want to display tables when a selection is made in a form and a 'Generate Factsheet' button is clicked. I've got a working code where I individually hide other divs when displaying the one I am interested in. Since I have several options in the form (and hence several corresponding divs in which the respective tables are enclosed), the final code appears bulky. I want to write a function to hide other divs whiles displaying the one I am interested in. This is the code I currently have:
var tableDivs = ['tableOPVDiv','tablePneumoDiv','tableRotaDiv'];
var selectedVaccine;
var selectedTableDiv;
function generateFactsheetFunction(){
// Selecting the vaccine chosen from the dropdown
var e = document.getElementById("selectVaccine");
selectedVaccine = e.options[e.selectedIndex].text;
console.log("selectedVaccine: ", selectedVaccine);
if (selectedVaccine=="Rotavirus Vaccine"){
selectedTableDiv='tableRotaDiv';
console.log("rotavirus selected");
hideOtherTables();
} else if (selectedVaccine=="Polio Vaccine"){
console.log("polio selected");
selectedTableDiv='tableOPVDiv';
hideOtherTables();
} else if (selectedVaccine=="Pneumococcal Vaccine"){
console.log("pneumo selected");
selectedTableDiv='tablePneumoDiv';
hideOtherTables();
}
}
function hideOtherTables(){
var testa = tableDivs.indexOf(selectedTableDiv);
console.log("tableDivs[testa]: ", tableDivs[testa]);
console.log("testa: ", testa);
testb = tableDivs[testa];
console.log("testb: ", testb);
document.getElementById(tableDivs[testa]).style.display="block";
/*var newTableDivs=tableDivs.splice(testa);*/
/*for (y=0;y<newTableDivs.length;y++){
document.getElementById(newTableDivs[y]).style.display="none";
}*/
}
The uncommented part works fine. In the commented part, I want to say that for all array elements other than selectedVaccine, I want the display to be:
document.getElementById(tableDivs[testa]).style.display="none";
I cannot splice the data because the selections are repititive (the selections are from a form). What is the way to set the visibility of tableDivs associated with other selections to be none.
Why should you change the display property of each and every division seperately? give a common class name to all the divisions and hide them all at once and then display only the required table.
$(".yourClass").hide();
document.getElementById(tableDivs[testa]).style.display="block";
You will have to use the jQuery Library too.
If you are not familiar with jQuery then use the for loop to hide all the tables first and then display only the required table.
for (y=0;y<TableDivs.length;y++){//you need not create newTableDivs
document.getElementById(TableDivs[y]).style.display="none";
}
document.getElementById(tableDivs[testa]).style.display="block";
i.e you just have to interchange the order of execution. ;)
Cannot read property 'style' of null this means that document.getElementById(tableDivs[y]) return null and can not find this element
try to write
document.getElementById("ElementId")
Here is the fiddle http://jsfiddle.net/Dano007/b11xarpp/5/
To be clearer. In the drop down box, I'd like two options (text). when the user clicks one of these options the relevant function results are returned. Like see when clicking the buttons, which are for example only.
I've added the drop down box, but cannot see how to bind the results from the two queries to it.
Could I use something like ?
$("select#FriendsConnected option.filter-prop2").show();
$("select#FriendsConnected option.filter-prop1").show();
Feel like I've hot a brick wall with this and ideally would like some help with the fiddle to move past it.
In your HTML, change select id to a valid css id, something like: s_FriendsConnected
<select name="huge" class="btn-group select select-block mbl select-multiple" id="s_FriendsConnected">
In your Javascript, change the select = getElementByID(FriendsConnected)'s ID to your new select id: s_FriendsConnected
var select = document.getElementById("s_FriendsConnected");
This solves it on my local machine... will update with the jsfiddle in a while..
EDIT:
Here's the jsfiddle. : http://jsfiddle.net/b11xarpp/7/
UPDATE:::
As per your requirement, in this new jsfiddle, I've removed the buttons and placed option tags with values in the html.
In Javascript, I've removed the var select = document.getelementbyid() function.
Also, I've replaced your click functions for the buttons with on Change event to the select menu:
$('select#s_Friends').change(function(){
var selection = $(this).val();
if(selection=='f_connected')
FriendsConnected();
else if(selection=='f_requests')
FriendsPending();
});
That's mostly all. Here's the updated jsfiddle: http://jsfiddle.net/b11xarpp/8/
Here's the jsfiddle for the code http://jsfiddle.net/VFskn/2/
The jquery multiselect2side has 2 parts for the list say the Available and Selected
a.To get the values of Selected portion of the I used the following code:
var multipleValues = $("#columnList").val() || [];
b. To get all values of the list I can use:
$('#columnList option').each(function() {
columns.push( $(this).attr('value') );
});
My Question is how I can obtain the Available portion of the list
If I understand your question right, you want to get the value of every option that is in the select under Available?
In the given example this select has the id "columnListms2side__sx", so that you can get the values of its options with
var multipleValues = [];
$("#columnListms2side__sx option").each(function()
{
multipleValues.push($(this).val())
});
here's the updated fiddle: http://jsfiddle.net/VFskn/3/
!important notes though: its not a good idea to mess with it, other then the functions provided by the plugin.
And I'm not sure how safe it is too assume that this select will allways get this id (e.g. if you have multiple of them in one page). It might be smarter to, build a more generic select. (the plugin seems to create a div container after the select it replaces, you want to get the first select in there)
EDIT:
this would be more generic, but less efficient:
$("#columnList").next().find("select").filter(":first").children().each(function(){...}
updated fiddle: http://jsfiddle.net/VFskn/4/