How to avoid the need for ctrl-click in a multi-select box using Javascript?
Check this fiddle: http://jsfiddle.net/xQqbR/1022/
You basically need to override the mousedown
event for each <option>
and toggle the selected
property there.
$('option').mousedown(function(e) {
e.preventDefault();
$(this).prop('selected', !$(this).prop('selected'));
return false;
});
For simplicity, I've given 'option' as the selector above. You can fine tune it to match <option>s
under specific <select>
element(s). For ex: $('#mymultiselect option')
Selecting multiple from an html select element without using ctrl key
You can save the Element.scrollTop and set it at the end.
$("select").mousedown(function(e){
e.preventDefault();
var select = this;
var scroll = select .scrollTop;
e.target.selected = !e.target.selected;
setTimeout(function(){select.scrollTop = scroll;}, 0);
$(select ).focus();
}).mousemove(function(e){e.preventDefault()});
http://jsfiddle.net/UziTech/cjjg68dr/114/
multi-select box without ctrl-click
The below code works in firefox 31.0,IE 10 and crome 36.0.1985.143. But it dose not work well if CTRL keys is used also.
$('select').bind("click", function (event, target) {
event.preventDefault();
var CurrentIndex = event.target.selectedIndex==undefined? $(event.target).index(): event.target.selectedIndex
var CurrentOption = $("option:eq(" + CurrentIndex+ ")", $(this));
if ($(CurrentOption).attr('data-selected') == undefined || $(CurrentOption).attr('data-selected') == 'false') {
$(CurrentOption).attr('data-selected', true);
}
else {
$(CurrentOption).prop('selected', false).attr('data-selected', false);
}
$("option", $(this)).not(CurrentOption).each(function (Index, OtherOption) {
$(OtherOption).prop('selected', ($(OtherOption).attr('data-selected') == 'true') ? true : false);
});
return false;
});
html Select multiple option with simple click without pressing CTRL button
I think you want somethings like this :
$('select[multiple]').multiselect()
<!DOCTYPE html><html><head><link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css" />
</head><body>
<select multiple="multiple"> <option value="cheese">Cheese</option> <option value="tomatoes">Tomatoes</option> <option value="mozarella">Mozzarella</option> <option value="mushrooms">Mushrooms</option> <option value="pepperoni">Pepperoni</option> <option value="onions">Onions</option></select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js"></script></body></html>
How to avoid the need for ctrl-click in a multi-select box using Javascript?
Check this fiddle: http://jsfiddle.net/xQqbR/1022/
You basically need to override the mousedown
event for each <option>
and toggle the selected
property there.
$('option').mousedown(function(e) {
e.preventDefault();
$(this).prop('selected', !$(this).prop('selected'));
return false;
});
For simplicity, I've given 'option' as the selector above. You can fine tune it to match <option>s
under specific <select>
element(s). For ex: $('#mymultiselect option')
<select multiple> with no scrolling and no ctrl click required and work on mobile
Solved with a very simple fix!
selectElem.ontouchstart = function() {selectElem.onmousedown = null;};
On touchStart, these events are fired:
- touchstart
- Zero or more touchmove events, depending on movement of the finger(s)
- touchend
- mousemove
- mousedown
- mouseup
- click
https://developer.mozilla.org/en-US/docs/Web/API/Touch_events/Supporting_both_TouchEvent_and_MouseEvent#Event_order
This nullifies what occurs during the mousedown process, so mobile can continue as normal, whilst desktop has the version which doesn't scroll and doesn't require CTRL to select multiple.
Related Topics
Print ≪Div Id="Printarea"≫≪/Div≫ Only
Setting CSS Pseudo-Class Rules from JavaScript
Angular: Conditional Class With *Ngclass
Force Dom Redraw/Refresh on Chrome/Mac
How to Dynamically Create CSS Class in JavaScript and Apply
Jquery Svg, Why Can't I Addclass
Changing a CSS Rule-Set from JavaScript
How to Hide a ≪Option≫ in a ≪Select≫ Menu With Css
How to Make a Div Stick to the Top of the Screen Once It's Been Scrolled To
Changing CSS Pseudo-Element Styles Via JavaScript
How to Use Jquery to Wait For the End of Css3 Transitions
Find All CSS Rules That Apply to an Element
Only Detect Click Event on Pseudo-Element
How to Change the Background Color With JavaScript