I'm trying to do something like this answer: https://stackoverflow.com/a/6256910/1641189
However I want to do it with multi-select fields since they provide scroll bars.
Instead of having each item move as soon as it's clicked, like the answer link above, I am going to have two buttons between the two select fields.
Something like this: http://www.kj4ohh.com/stuff/selectfields.png
How would I do this in javascript/jquery?
How would I return the contents of both select fields back to my flask application?
EDIT:
I had tried the following javascript:
function assign(form)
{
for(i=0;i<form.unassigned.length;i++) {
if (form.unassigned.options[i].selected == true) {
form.assigned.add(form.unassigned.options[i]);
form.unassigned.remove(i);
}
}
//unselect all items
form.assigned.selectedIndex = -1
}
function unassign(form)
{
for(i=0;i<form.assigned.length;i++) {
if (form.assigned.options[i].selected == true) {
form.unassigned.add(form.assigned.options[i]);
form.assigned.remove(i);
}
}
//unselect all items
form.unassigned.selectedIndex = -1
}
but with strange results:
With this script, if you select an item from either select field and hit the appropriate assign/unassign button it works corectly.
If you select two items, only one is moved.
If you select more than two, one is moved, one stays put and the rest vanish.
However if I add an alert() line outputting the current selection being observed, it will produce an alert box for each item selected correctly.
You have to use jquery plugin for better result
http://loudev.com/
You may try this
$(function(){
$('#toSel1, #toSel2').on('click', function(){
if($(this).attr('id')=='toSel2')
{
var l=$('#sel1 option:selected').length;
if(!l) {
alert("Option not selected !");
return false;
}
$('#sel1 option:selected').each(function(){
$('#sel2').append($(this));
});
}
else
{
var l=$('#sel2 option:selected').length;
if(!l) {
alert("Option not selected !");
return false;
}
$('#sel2 option:selected').each(function(){
$('#sel1').append($(this));
});
}
});
});
DEMO.
Related
I have a sidebar which is initially hidden on pageload. I want to show the div sidebar when the select-multiple field stickets isn't empty. I've been trying different solutions but so far it only works if it's a textbox where I input the value myself. What am I missing/doing wrong? Is this even possible for select-multiple?
$("#stickets").change(function() {
if(this.value.replace(/\s/g, "") === "") {
$(".sidebar").hide();
} else {
$(".sidebar").show();
}
});
$(".sidebar").click(function() {
$("#stickets").val("");
$(this).hide();
});
EDIT: I found out that it does work but only after I select an item the field. How can I show the the div without having to do this extra step?
Try this
if($("#stickets").val()==''){
$(".sidebar").hide();
}else{
$(".sidebar").show();
}
I have an dropdown menu and an add button which adds the selected value to the select-multiple list stickets. I just had to put the $(".sec-sidebar").show(); to the function for the add button.
Thanks everyone!
Not really.The select multiple return an array list when calling the jQuery.val() method.
So the correct test could be:
$("#stickets").change(function(){
if (!$("#stickets").val() || !$("#stickets").val().length){
$(".sidebar").hide();
}else{
$(".sidebar").show();
}
})
I have a list with checkbox. I am submitting the checked rows but before submitting i am validating the list whether it have any checked values or not, for that i have written a jQuery.
jQuery(function(){
jQuery("#newDeliveredAll").click(function () {
if(jQuery('.notClosedCase').prop('checked')) {
jQuery(".notClosedCase").click(function(){
if(jQuery(".notClosedCase").length == jQuery(".notClosedCase:checked").length) {
jQuery("#newDeliveredAll").attr("checked", "checked");
} else {
jQuery("#newDeliveredAll").removeAttr("checked");
}
});
return true;
}else {
alert(" Please select atleast one order ");
return false;
}
});
});
But the issue which i am facing is, when the first row is not checkedeven tho if i have checked multiple rows and left the first row, its showing the same alert written in else part
You checked condition like below.
if(jQuery('.notClosedCase').prop('checked'))
This condition is true when all the checkbox is checked which has notClosedCase class. If any of the checkbox not checked, it is return false. so only you got false block.
Please use below condition.
if (jQuery('.notClosedCase:checked').length > 0)
Fiddle
Hope this will help you.
I have three dropdown lists. When a selection is made from dropdown list 1, I want to remove that option from the other two. When dropdown list 1 changes it selection, add back the previous and remove the currently selected. This is the following code that I have. I feel I'm close, but still missing something essential.
<script>
$(document).ready(function () {
$("#option1dropdown").change(function () {
$("#option2dropdown").empty();
$("#option3dropdown").empty();
$("#option1dropdown option").each(function(){
if ($("#option1dropdown").val() != this) {
$("#option2dropdown").append(this);
$("#option3dropdown").append(this);
}
});
});
});
</script>
Append will move, not copy the element in question. You should also double check your comparison within the if.
$(function () {
$("#option1dropdown").change(function () {
$("#option2dropdown").empty();
$("#option3dropdown").empty();
$("#option1dropdown option").each(function(idx, item){
if ($("#option1dropdown").val() != $(item).val()) {
$("#option2dropdown").append($(item).clone());
$("#option3dropdown").append($(item).clone());
}
});
});
});
https://jsfiddle.net/egeLh428/
I have a div with the id "PCsetup" set to slide open when any of three check-boxes (#PCOF, #PCTMI, or #PCRM) are checked, but if one or two of the three is already checked, and the user checks another check-box, I want to end the function before it slides open, as it would actually close the "PCsetup" div. How can I have the function check if the other two check-boxes are checked, and if they aren't, have the div slide down? Here's what I have so far:
$(function() {
$("input[type=checkbox]").on('click', function(){
if ($("#PCOF").is(':checked'))|| ($("#PCRM").is(':checked')) {
return;
} else if $('#PCTMI').is(':checked')){
$("#PCsetup").slideDown("slow");
} else {
$("#PCsetup").slideUp("slow");
}
});
A couple things: 1. The anonymous function in your example isn't closed, so the code isn't valid. 2. I had a hard time following exactly what you're trying to accomplish, but it sounds like you want to show the div if any combination of checkboxes are checked and hide it if none are checked. This will get you that result:
$(document).ready(function() {
$(function() {
$('#PCOF, #PCTMI, #PCRM').on('click', function() {
var numChecked = $('#PCOF:checked, #PCTMI:checked, #PCRM:checked').length;
if (!numChecked) {
$('#PCsetup:visible').slideUp('slow');
} else {
$('#PCsetup').slideDown('slow');
}
});
});
});
http://jsbin.com/IsutuhI/3
something like
$(function() {
var $chks = $('#PCOF, #PCRM, #PCTMI');
$chks.on('click', function(){
var checked = $chks.filter(':checked').length > 0, visible = $("#PCsetup").is(':visible');
console.log('dd', checked, visible)
if (checked && !visible) {
$("#PCsetup").finish().slideDown("slow");
} else if(!checked && visible){
$("#PCsetup").finish().slideUp("slow");
}
});
});
Demo: Fiddle
I have this:
$('input.people').attr('checked', function() {
return $.inArray(this.name, ['danB', 'lindaC']) != -1;
});
It is for a list of contacts. I want to be able to have the user click a checkbox that will select the people in a specific role and uncheck everyone else. That works. Now I want to modify this so that if someone unclicks the same checkbox that it deselects those people (and only those people). Would that be an onBlur event?
I'm thinking something like this:
$('input.people').attr('checked', function(){
return $.inArray(this.name, ['danB', 'lindaC']) != 1;
});
or would it be:
$('input.people').attr('checked', function(){
return $.inArray(this.name, ['danB', 'lindaC']) = -1;
});
And how would I integrate this with the top function? A shout out, btw, to Nick Craver for his help to date.
$('input.people').change(function ()
{
if(!$(this).hasClass("checked"))
{
//do stuff if the checkbox is checked
$(this).addClass("checked");
return;
}
//do stuff if the checkbox isn't checked
$(this).removeClass('checked');
});