hi everyone i have a issue with jquery :
in my code i have two multiple selection one on the left one on the right and a button near the selection on the right and i when a click on it the text from the right is copiedinto an input this is already done.i can add or remove element from a list to another with two button :
add and remove . hope i have been clear
when the text is copiedinto the input i can't move it anymore unless another text is copied throught the button near the selection :
here is my jquery code :
if($('#rightoption:selected').val() === $("#chosen").val())
{
$('#remove').attr('disabled' ,'disabled');
}
else ($('#right option:selected').val() !==$("#chosen").val())
{
$('#remove').removeAttr('disabled');
}
chosen is the id for the input.
but the problem is that when i select something different from the thing in the input he still disabled the button remove
This :
else ($('#right option:selected').val() !==$("#chosen").val())
{
$('#remove').removeAttr('disabled');
}
is equivalent to
else {
$('#right option:selected').val() !==$("#chosen").val(); // this does nothing
}
$('#remove').removeAttr('disabled');
You probably wanted
if($('#right option:selected').val() === $("#chosen").val()){
$('#remove').attr('disabled' ,'disabled');
} else {
$('#remove').removeAttr('disabled');
}
or better :
$('#remove').prop(
'disabled', $('#right option:selected').val() === $("#chosen").val()
);
And I suppose the first test should have '#right option:selected' (note the space).
Related
I'm using the following code to hide the text based on the answer given. Its so simple but i must be missing something. What am I doing wrong?
$('.nameclass').on('change', function() {
if( $('input[name=idname]').val() == '1' ) {
$('#idname').removeClass('hide');
} else {
$('#idname').addClass('hide');
}
});
<div class="hide" id="idname">
<legend>To be hidden depending on answer</legend>
</div>
</div>
Your select selector is not correct. In the listener selector, there is no tenaamstellingclass assigned class to the select box. In the if statement you are trying to get the select box by using input[name=tenaamstelling] when you should use it like select[name=tenaamstelling] because it is a select box and not an input field.
You can either add the tenaamstellingclass class to your select input, or use this code.
Just replace this:
$('.tenaamstellingclass').on('change', function() {
if( $('input[name=tenaamstelling]').val() == 'VOLMACHT' ) {
$('#tenaamstelling_volmacht').removeClass('hide');
} else {
$('#tenaamstelling_volmacht').addClass('hide');
}
});
with:
$('select[name="tenaamstelling"]').on('change', function() {
if( $(this).val() == 'VOLMACHT' ) {
$('#tenaamstelling_volmacht').removeClass('hide');
} else {
$('#tenaamstelling_volmacht').addClass('hide');
}
});
Now, if the .hide is defined correctly in your CSS, everything should be fine
You can check it here:
https://jsfiddle.net/vk3o6gyc/
Given your HTML, the default for the #tenaamstelling_volmacht div is hidden and when option 2 is selected it is then displayed.
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'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.
Thanks for helping - I apologize ahead of time if my title was a bit confusing, Im having a hard time explaining the issue and even finding a solution.
Im trying to create a conditional form for a module that I'm currently building, but am paralyzed by my lack of true javascript knowledge.
*The code I'm currently working with can be found at:
http://jsfiddle.net/jgliesman/MQjf8/3/*
*What I would like the form to do can be found at:
http://form.jotform.us/form/22290232014135*
What Im trying to get the "mini code" to do is (like the Jotform)...
Clear the drop down/input selection if you change the parent. Right now the "mini code" is not hiding the 'grand-children' of the main parent when you switch to another parent. The direct child disappears but the 'grand-child' remains
I would also like it to reset the drop down/input selection if its hidden because if you pull it back up the selected option is still apparent its just hidden.
If you would like me to clarify anything please let me know, I really appreciate the help.
Thanks again,
Try this:
$(document).ready(function(){
$("#select1").change(function(){
if ($(this).val() == "1") {
$("#hide1").slideDown("fast");
} else {
$("#hide1").slideUp("fast");
$("#hide2").slideUp("fast");
$("#select2 option:first").prop('selected', true);
$("#select3 option:first").prop('selected', true);
}
});
$("#select2").change(function(){
if ($(this).val() == "1") {
$("#hide2").slideDown("fast");
} else {
$("#hide2").slideUp("fast");
}
});
});
Fiddle
i updated your fiddle: http://jsfiddle.net/MQjf8/4/
It does the same as #undifned suggested, but it also takes the reset into account.
$(document).ready(function(){
$("#select1").change(function(){
if ($(this).val() == "1" ) {
$('#hide1 select').val('(choose one)'); // select default
$("#hide1").slideDown("fast"); //Slide Down Effect
} else {
$("#hide1").slideUp("fast"); //Slide Up Effect
$("#hide2").slideUp("fast"); //Slide Up Effect
}
});
$("#select2").change(function(){
if ($(this).val() == "1" ) {
$('#hide2 select').val('(choose one)'); // select default
$("#hide2").val('(choose one)').slideDown("fast"); //Slide Down Effect
} else {
$("#hide2").slideUp("fast"); //Slide Up Effect
}
});
});
i have a regular combobox and i am listening to the change event and sticking the selected value in an html table. this all works fine but there is one issue. Right now, the user can select the same item more than once (which i dont want to allow).
At the point of where an item is selected, i want to:
Capture the value and stick it in the table (which i am doing now and code is below)
<script type="text/javascript">
$(document).ready(function() {
$('#categories').change(function() {
if (this.selectedIndex != 0) {
addRowToTable(this.value);
}
});
}
And i am trying to figure how to do #2 and #3 below . .
reset the selectedindex back to 0 (which says "Please select . .")
Not allow that selection to be selected again (and any visual representation on disabling that dropdown item).
Number 1 is pretty simple:
$('#categories option:first').get(0).selectedIndex = 0;
You can also use the value of the option against the dropdown list like so:
$('#categories').val('myOptionValue');
To prevent an item from being selected a second time, I would remove it from the dropdown list with something like this:
$('#categories option[value=valueToRemove]').remove();
cballou's answer sets #rel="disabled" on the select element, which causes the "single selection allowed bug".
I would tweak it to look like the below code. Also, I'd recommend setting a class instead of using the rel attribute. That way you add styles (browser permitting) that indicate to the user that the option is disabled.
CSS:
#categories .disabled { background:#c00; }
JS:
$(document).ready(function() {
$('#categories').change(function() {
var selectedIndex = this.selectedIndex,
selection;
if ( selectedIndex !== 0 ) {
selection = $(this.options[selectedIndex]);
if( !selection.hasClass('disabled') ) {
addRowToTable(this.value);
selection.addClass('disabled');
}
}
// reset selected index
$(this).val('');
});
});
OK if i were you i wouldnt use a Drop down box for this... i would use multiple <select multiple="true"> which is going to allow you to select multiple items at a time by using ctrl+click (cmd+click on mac), then i would have an add button to click when done. this would fire the js taht would grab all the selected options put em in your table or what have you and then then remove them from the select box.
http://www.w3schools.com/TAGS/att_select_multiple.asp
You could add a rel="disabled" attribute to the option and check for it like so:
$(document).ready(function() {
$('#categories').change(function() {
if (this.selectedIndex != 0 && $(this).attr('rel') != 'disabled') {
addRowToTable(this.value);
$(this).attr('rel', 'disabled');
}
});
});
If your first option (selectedIndex 0) has an empty value, you can easily reset like so:
$(document).ready(function() {
$('#categories').change(function() {
if (this.selectedIndex != 0 && $(this).find('option:selected').attr('rel') != 'disabled') {
addRowToTable(this.value);
$(this).find('option:selected').attr('rel', 'disabled');
}
// reset selected index
$(this).val('');
});
});