I'm using JQuery Multiselect plugin from here: http://www.erichynds.com/blog/jquery-ui-multiselect-widget
When the list of options is long a scroll appears, but it doesn't scroll automatically to the selected option. It means that, after selecting the 50th option, if I want to select option 51st I have to search again all the way down.
Do you know how to solve this issue? I tried to use scrolltTop but no luck.
The code is really simple...
$(function(){
$("select").multiselect({multiple: false, selectedList: 1});
});
Here is a jsfiddle with this problem: http://jsfiddle.net/g5r92/1/
Thanks a lot in advance.
have a look at this, first attempt and it´s working fine
http://jsfiddle.net/g5r92/7/
$(function(){
$("select").multiselect({multiple: false, selectedList: 1});
$('.ui-multiselect').click(function(){
$('.ui-multiselect-checkboxes').animate({
scrollTop: $(".ui-multiselect-checkboxes .ui-state-active").offset().top
}, 2000);
});
});
you will only need to fit it to your needs, add some extra pixels to the offset and it will scroll the selected option in the middle instead of the very top
You are right, it works indeed. My problem was because I have more than one multiselect in the same page, so offset().top was always zero for any multiselect except the first one (and I hadn't noticed that it was not zero for the first one...). Solved with this:
$('.ui-multiselect-checkboxes').scrollTop($($('.ui-multiselect-checkboxes .ui-state-active')[index]).offset().top);
Where index is the index of multiselects in the page.
Thanks a lot!
I would suggest, to edit your "jQuery MultiSelect UI Widget 1.12" JS file,
to "auto-select" while opening the menu option.
on your file, search for: (always select first item)
this.labels.eq(0).trigger('mouseover').trigger('mouseenter').find('input').trigger('focus');
and change it to: (dynamic select):
var idxSelected = 0;
if (o.multiple == true){
// find first checked.
idxSelected = $container.find('input[type=checkbox]:checked:first').parent().parent().index();
}
else {
// find the one that checked
idxSelected = $container.find('.ui-state-active:first').parent().index();
}
idxSelected = idxSelected < 0 ? 0 : idxSelected ;
this.labels.eq(idxSelected).trigger('mouseover').trigger('mouseenter').find('input').trigger('focus');
tested on FF + CHROME + IE (on multiple + single list)
Related
I have provided a user with an interface where they can select from 30 options(hardcoded), displayed in a bootstrap dualListBox.
This works perfectly however I would like to set the max amount of options that can be selected to 10.
After which, all the options that could have been selected on the left side, become disabled.
Should the user remove a selected option, the others can then become available for selection again.
I realize that I will be using jquery to achive this, however I am unsure as to how I will count the amount selected and how I will target remaining selections to disable or make them available again.
Is there any advice on how to correctly solve this problem?
The plugin I am using for the dual listbox can be found here:
Bootstrap dualListBox
First I would bind a change event, then I would check if the number of selected items is equal or exceeds then max number of elements, if so I will disable it.
If I understand your question correct it would be something like:
$('#selector-id').on('change', function(e){
var selectedElements = $(this).val();
if(selectedElements && selectedElements.length >= 10){
$(this).prop('disabled', true);
} else {
$(this).prop('disabled', false);
}
});
(This is not tested code)
I have a drop down select tag like so :
<select id="thisDropDown" onChange="doSomething()">
<option></option>
<option>classif</option>
<option>status</option>
</select>
Notice I'm using the onChange();
What I need is the ability to re-click an option in my drop down so it runs the function again (as I can change other drop downs which affect the outcome of running this function).
I have tried onselect() and onclick() but none seem to work. Do I have to write a bit of script ? I have been looking online but can't seem to find something that will work.
Thanks in advance, sorry if something similar has been asked before
We can achieve this but with minor tweaks which are required based on the browser
JSFiddle link https://jsfiddle.net/0kxe6br7/2/
var dom = "select#thisDropDown";
var is_firefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
if(is_firefox){
dom+=" option";
}
$(dom).on("click",function(event) {
console.log($(event.currentTarget).val());
});
Hej,
This can be done with jquery
$('#thisDropDown').on('mouseup', function() {
alert('select option');
});
I have 3 exactly the same selection boxes generated by PHP code.
I want to disable each selected option on the other selection boxes.
I've found this Answer and using it's 2nd edit fiddle there I've almost got what I need in this section:
sel.nextAll().each(function(){
if(prev){
$(this).find("[value='" + prev+ "']").prop("disabled",false);
}
$(this).find("[value='" + val + "']").prop("disabled",true);
});
Thing is, that the selection disable affect only the following selection boxes and not backwards, meaning: when selecting option in the 3rd (most right) selection box, it is not disabled on the other selection boxes.
I tried using prevAll combining the the nextAll but with not much of success.
Any idea how could I reach this kind of behavior?
Thanks in advance.
I have added a new code under nextAll side.
sel.nextAll()....
...
sel.prevAll().each(function(){
if(prev){
$(this).find("[value='" + prev+ "']").prop("disabled",false);
}
$(this).find("[value='" + val + "']").prop("disabled",true);
});
Code: http://jsfiddle.net/RaBuQ/160/
When select something from 3rd selectbox, will disable options from another selectboxes.
This script is designed to map the location between two cubicles so that people in large office buildings can figure out where they need to go to get to that other person. I've almost got it...
I have two different dropdown menus I'm working with.
By default, the dots on the page display.
Each dot corresponds to a name on the dropdown list.
When you select the name under the first dropdown, the other dot will disappear, and then if you select the name under the other dropdown, the first one disappears.
What I want to happen is - When both names are selected from the dropdowns, then both dots are showing at the same time.
I can get one or the other, but not both.
Here's the JS I have to toggle between the two...
$('#mapMe').change(function() {
var selectedMeChoice = $('#mapMe option:selected').val();
if (selectedMeChoice == 'ALL'){
$('a.dot').slideDown(1000);
}else{
$('a.dot[mechoice = "'+selectedMeChoice+'"]').slideDown(1000);
$('a.dot[mechoice != "'+selectedMeChoice+'"]').slideUp(1000);
}
});
$('#mapThem').change(function() {
var selectedThemChoice = $('#mapThem option:selected').val();
if (selectedThemChoice == 'ALL'){
$('a.dot').slideDown(1000);
}else{
$('a.dot[themchoice = "'+selectedThemChoice+'"]').slideDown(1000);
$('a.dot[themchoice != "'+selectedThemChoice+'"]').slideUp(1000);
}
});
I think it has something to do with the slideUp/slideDown function, but I can't figure it out...
There's a jsfiddle here.
You aren't distinguishing between "them" and "me" in any way, so you're hiding the other one which should be shown. Try something like this, to only hide the correct dots:
$(".me").removeClass("me");
$('a.dot[mechoice = "'+selectedMeChoice+'"]').addClass("me").slideDown(1000);
$("a.dot").not(".me, .them").slideUp(1000);
http://jsfiddle.net/XvHJS/10/
In this way you will hide only a previous "me" and not hide everything, including an active "them".
$('a.dot[mechoice != "'+selectedMeChoice+'"]').slideUp(1000);
Is also removing those which have no memchoice at all, including those with themchoice.
I would suggest using different classes dotme and dotthem instead.
I've hacked html's < select multiple > with javascript, according to my customer's specifications:
clicking an item only toggles that item's selected status.
other selected items stay selected.
The little bit of javascript remembers all selected values.
When the user clicks, only the option he clicks will be selected.
The javascript selects the options he remembers.
However, it causes a flicker effect. I doubt there is any solution for this, but I felt I had to ask just in case, does anyone know of a way to delay the rendering, or any other solution to accomplish this, without a flicker?
Best regards.
EDIT: here is the code
var choices=new Array();
function prepmulti(){
var m=document.querySelectorAll('select');
for(var i=0;i<m.length;i++)
if(m[i].id!=''){
m[i].onclick=toggle;
choices.push(new Array());
}
}
function toggle(){
var sel, x;
for(var i=0; i<this.options.length;i++)
if(this.options[i].selected){
sel=i;
break;
}
if((x=choices[this.id].indexOf(sel))<0)
choices[this.id].push(sel);
else{
choices[this.id].splice(x, 1);
this.options[sel].selected=false;
}
for(i=0;i<choices[this.id].length;i++)
this.options[choices[this.id][i]].selected=true;
}
<body onload='prepmulti();'>
The select multiples have ids 0, 1, 2, etc... If you give them other ids, the code must be modified a little.
The flicker you see is from it changing the selected option(s) then repainting - unfortunately I don't think this is avoidable in most browsers.
In Chrome you can bind onmousedown on the select, use preventDefault and then set the event target's selected to the opposite of what it is.
var m=document.querySelectorAll('select');
for(var i=0;i<m.length;i++)
{
m[i].onmousedown = function(e) {
e.preventDefault();
e.target.selected = !e.target.selected;
};
}
http://jsfiddle.net/VDnQK/
This only works in Chrome, though. IE supports preventDefault for select but e.target returns the select rather than the option element.
FireFox doesn't seem to support preventDefault for select (at least, I can't get it to work).