Dependent Selects in prototype - javascript

I have two <select>s with the same <option>s, and I need - using prototype - that when selecting an option in one of them, the same option is removed from the other select and additionally the latter must mantain its previously selected option.
Any clues ? Is there a better way than remembering the last item selected, recreate the options array, an reselecting the item ?
Thanks!

You can 'remove' the item from the other select, but you need to specify it by its index, and you'll still need to remember the selected item, and recalculate its index after the removal. So it's slightly better than recreating the array, but not much better.

Related

Remove Item from Paper.js Group

Paper.js has a clear way to add an Item to a Group using addChild(item). However, there does not seem to be a clear way to remove an Item from a Group without also removing that item itself from the view.
Groups have a children property, but according to the documentation, it should not be mutated:
The children array should not be modified directly using array functions. To remove single items from the children list, use item.remove(), to remove all items from the children list, use item.removeChildren(). To add items to the children list, use item.addChild(item) or item.insertChild(index, item).
So each item has a remove() method, but this not only removes it from the Group but also from the display.
How can I remove an Item from a Group, only dissociating it with the Group and not removing it from the display? Is there a cleaner way to do it than this?
item.remove();
paper.project.activeLayer.addChild(item);
Your approach
item.remove();
paper.project.activeLayer.addChild(item);
is how it should be done. Unless you call paper.view.update() it's not going to re-render the canvas in between the two calls, so there is little cost in making the extra function call.

JQuery Unique() function not working properly

I'm working on an interface that allows the user to select multiple "cards". Each card has a "data-name" attribute and may also have a corresponding menu item. If they select the card in the main view, it also highlights the menu item. When something is clicked, I add the "selected" class to it. I then get all the 'selected' items and count the unique data-name attributes to get the number of actual items selected.
This works very well when selecting up to 5 items. For some reason, on the 6th item the unique() function seems to stop working correctly. I was unable to duplicate this issue with jsfiddle, but the code was a bit less complex, as locally I'm also dealing with "types", but I think that's irrelevant to the problem.
So here are some screenshots of the relevant arrays after I have selected the 5th item.
Here you see ALL selected items. There are 10, as expected. This breakpoint is just before the unique() call.
Here you see unique selected items. There are 5, as expected.
And then I select the 6th one... 12, as expected...
Aaand now we have a mysterious duplicate! Why???
This happens consistently; every single time. And note that it doesn't matter which item I select last. I've added as many as 10 dummy items and it's always the 6th one that it gets confused on.
Taken from jQuery.unique():
Description: Sorts an array of DOM elements, in place, with the duplicates removed. Note that this only works on arrays of DOM elements, not strings or numbers.
If you want to get a unique array of string or numbers, you will need to use your own function. Here's one taken from a previously answered question similar to yours:
function unique(array) {
return $.grep(array, function(el, index) {
return index == $.inArray(el, array);
});
}

Find out if the number of selected items > 1 in a multiple select box using prototype

Is there a way I can find out if there are more than one items selected in a multiple select box?
I know it can be done in a linear fashion by going through each option individually, but I would like to avoid that because I am just going to enable or disable a UI component based on the number of items selected.
As this operation does not really require the values nor text value of the selected items, I am looking for a simple way like using pluck or something similar. Any help would be greatly appreciated.
In jQuery you can use the descriptor;
$('.select-box:selected')
to return a list of all the selected items in a multiple select box. You can then use .size() to tell you how many there are.
if ( $('.select-box:selected').size() > 1 ) {
// do stuff
}

How to default a select list to have no elements selected for use with jQuery bsmSelect plugin

I'm using the jQuery bsmSelect plugin to give my users a convenient way to select multiple options from a select-drop-down list. It works well, except I need it to start with nothing selected by default. Anyone know how this can be accomplished?
bsmSelect intro:
http://www.ryancramer.com/journal/entries/select_multiple/
HTMLSelectElement.selectedIndex = -1;
The ordinal index of the selected option, starting from 0. The value -1 is returned if no element is selected. If multiple options are selected, the index of the first selected option is returned.
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-94282980

JQuery: Select Elements changes tracked but not their values!

I have just got a questioned answered and have fallen into another trap!
I have a form which is in a lightbox and I want to track every change in the select elements. When they change I want to get the value of each of the select elements. I have tried to do the following:
$('select.htt, select.hst').live('change', function() {
var channels = parseInt($('select.hst').val(), 10) * parseInt($('select.htt').val(), 10);
alert($('select.hst').val() + ' and ' + $('select.htt').val());
$('span.yellow2').html(channels);
});
However, the values are always the same i.e. the first option in each drop down box even though there are other options selected. I am guessing like somebody has explained before. The lightbox I am using takes a copy of these elements and makes changes to them and JQuery can not see this, but I have been told to reference the elements via classes which has worked but only up to this point.
What else can I try and what is the problem?
I really appreciate any help.
Thanks all
The reason for your problem is that you have two (or more) copies of your select elements. When you call $('select.hst').val(), jQuery returns the value of the first select element with class hst that it finds, which is not the value you want.
You will have to find a way to scope your jQuery selectors to only the elements inside the visible lightbox div. If the lightbox div has an id or some other unique attribute, use that to scope your form/select/span elements.
If the lightbox div has id "lightbox":
<div id="lightbox">
...
</div>
Use selectors of the form:
$('#lightbox select.hst').val();
Two things (try the first then then the first + second):
You are choosing select, not option, so try choosing all options that are selected
$('select.hst option:selected').val()
Second, you are choosing val() which will return the value attribute of the option. Just in case you want the text instead, choose text().

Categories

Resources