I am working on hybrid application with worklight.
When tapping on select control, a native dropdown pops out. Now I have bound onchange event on this select so when I choose any option the event gets fired but the dropdown doesn't fadeout until I tap on the done button.
I have used ('select').blur() to overcome and it is working fine for Android but not for iOS6.
I want to fadeout the dropdown with onchange.
Code:
<select id="myID" onchange="myFun()">;
function myFun(){
$('select').blur();
}
or
function myFun(){
$('#myID').blur();
}
What are the possible soultions for it? Thanks.
It seems that in iOS you cannot use .blur() on a select element, the event will be ignored.
Note: in iOS the user is expected to tap the Done button. Why confuse your end-user by introducing unexpected interaction and behavior (= not provided by the OS to begin with). For example, what if the user selected by mistake? Instead of being able to correct on the spot, s/he will be forced to tap again and select again... I recommend leaving it with the default behavior.
Updated example: instead of removing the select from the DOM and re-introducing it, I've found this.
The below works only in iOS6, though, per the question. It doesn't work in iOS7.
HTML
<div id="mySelectDiv">
<select id="mySelect">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
Selected option: <input type="text" id="selectedOption"/>
JavaScript
function wlCommonInit(){
$("#mySelect").bind('change', changeValue);
}
function changeValue() {
var mySelectedIndex = $("#mySelect option:selected").index();
$("#selectedOption").val($("#mySelect option:selected").text());
if($("#mySelect").is("select")){
var fakeSelect = $("#mySelect").clone();
$("#mySelect").replaceWith(fakeSelect);
$("#mySelect").bind('change', changeValue);
$("#mySelect").prop('selectedIndex', mySelectedIndex);
}
}
While my previous answer will work, only in iOS6, the following works for me in both iOS6 and iOS7 using the iOS7-Select-Element-Auto-Close plug-in by lukewhyte.
Simply place the JS code provided in the plug-in in your project and include it in your index.html,
<script src="js/select.js"></script>
Then:
HTML
<div id="mySelectDiv">
<select id="mySelect">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
JavaScript
function wlCommonInit(){
$('#mySelect').iOSSelect();
$("#mySelect").bind('change', changeValue);
}
function changeValue() {
$("#selectedOption").val($("#mySelect option:selected").text());
}
Related
Any solution need only work in WebKit browsers.
The internet is littered with attempts to make this work - some who claim to have it working and some who claim it can't be done. In my experience, none of the suggested methods have worked. Is this simply impossible?
Supposing I have a select like <select id="mySelect" />
Things I've tried:
select::before -- Is added to the DOM, but doesn't render
<label for="mySelect" /> -- Does nothing when clicked/tapped
document.querySelector('select').click() -- Does nothing
The method from this answer (React-specific) -- Cannot assign a click handler or any other handler that can programmatically open the select to begin with
I'm open even to a jQuery solution, even though we're using React and we would be loading jQuery solely for triggering the select to open.
On third party select components: The goal is to trigger the mobile OS's native select control for the user, so something like React-Select is not suitable.
A dirty solution updated from here (https://stackoverflow.com/a/249219/3684265)
var _select = document.getElementById("test");
_select.addEventListener("mouseout",function(){
this.size = 1;
});
_select.addEventListener("mouseover",function(){
this.size = 4;//set to show the number that you want
});
<select id="test">
<option value="1">1</option>
<option value="1">2</option>
<option value="1">3</option>
<option value="1">4</option>
<option value="1">5</option>
<option value="1">6</option>
</select>
I don't know if someone tackled with this issue before or not but it seems like a bug in firefox I can't find any way around it.
How to reproduce the bug :
Add an event listener on the document like click or mousedown
Then open any select tag on the document
Click outside the select tag
Expected:
To fire the event after clicking outside the select tag
I need to detect if the user clicked outside the select tag or not?
When you click the <select> HTML object the browser (more specifically older versions of Firefox) adds a back-drop to the document and listens for a click within it in order to close the <select> after you perform a click outside of it (also thought as helpful for misclick prevention).
I just tested it on Firefox 53.0 and it did work fine (onclick triggered after <select> was open). On mousedown instantly blurs (sets the select out of focus) and closes it. Perhaps, you could share some of your code or a JSFiddle URL.
Simple HTML <select> with a <button> having an onclick event (Try with Firefox 53.0)
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<button onclick="alert('Clicked')">M</button>
#Zerfir please try this code snippet on Firefox 62.0 (64-bit)
Open the select tag and hover over the button it shouldn't change the text as chrome does.
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<button onmouseenter="this.innerHTML = Math.random();">M</button>
I need to control a <select> element (open it, navigate through its options, select value etc) using javascript.
As this is impossible(JS cannot open a <select> element) I wonder: Is there a drop-in replacement that looks the same(keeps the native UA styling of a real select element) and works the same(i.e. in forms, keyboard navigation (up/down) ), except it can be controlled more by JS ?
More background:
I have an ElectronJS based application and until now I used native OS keyboard events to control the <select> element but since the latest update of the OS( Mac Mojave) native keyboard events are no longer allowed so I have to use JS only. The app is quite big so I'm trying to minimise the amount of work to replace native <select> menu with a custom one.
If you want to set the value of a select input, then you can do that using vanilla javascript.
Given a select element like this:
<select id="my-select">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
You can use the following javascript to change the value:
document.getElementById('my-select').value = 'saab'
<select id="test-select">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<button onClick="document.getElementById('test-select').value = 'fiat'">Click me</Button>
you can use select2 library
https://select2.org/
with search
I have a classic HTML select box:
Show:
<select name="show" id="showThreads">
<option value="all" selected="selected">All</option>
<option value="new">Only unread</option>
</select>
Now, I need JavaScript to make an Ajax request when the user changes the selection in the box (without jQuery).
I have tried:
Listening for clicks on the <option> tags, but it won't work for users using a keyboard or a touch device
on an interval, looping though the <option> tags and checking if the selected one changes, but it seemed to trigger even when I simply hovered over the second option.
Is there a way of doing this that will work on all browsers/devices?
Thanks!
Try the "change" event.
document.getElementById("showThreads").onchange = function() {
};
Listen for onChange on the <select> tag.
function yourAjaxCall(something) {
}
<select name="choice1" size="1" onchange="yourAjaxCall(this);">
<option value="one">first</option>
<option value="two">second</option>
<option value="three">third</option>
</select>
I'm looking to find the Javascript Event I need to put into jQuery's .bind function in order to have the function triggered when a selection is made from a <select> element.
At the moment I'm using .bind('change',function() { ...}) but I need the event to trigger when the selected option is chosen again.
Any suggestions?
I'm currently doing this successfully by clearing the dropdown box selection so that it can be re-selected. It will allow you to trigger the function again by adding this within your function before the end:
$('select option:selected').removeAttr('selected');
Change on select boxes is unreliable anyway. Read:
http://www.quirksmode.org/dom/events/change.html#t05
I'd probably go for something click (but be suspicious, somebody (--> IE) is going to make your life difficult). Or build something yourself without select.
This is possible, however it is not fully supported. Here is a sample:
html
<select id="selectId">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</select>
jquery
$("#selectId>option").click(function(){
alert(this.value);
});
here is a mediocre approach to handle ie:
<div id="dropdownWrapper">
<select id="selectId">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</select>
</div>
js
var clickCount_guid324fF = 0;
$("#dropdownWrapper").click(function(){
if(++clickCount_guid324fF % 2 == 0){
alert($("#selectId").val());
clickCount_guid324fF = 0;
}
});
Wouldn't click work? .bind('click',function() { ...})
I once did this using mouseup, and checked where the event originated. If it was an option element, i handled the select. No listening on onchange at all:
<body>
<select id="select0">
<option value="0">option 0</option>
<option value="1">option 1</option>
<option value="2">option 2</option>
</select>
<script type="text/javascript">
$('#select0').bind('mouseup', function (e) {
var src = e.target;
if (src.nodeName.toLowerCase()==='option') {
doMagicOnSelect(this);
}
});
function doMagicOnSelect(selectElem) {
console.log('current value:'+selectElem.value);
}
</script>
</body>
There is no reliable event fired when a selected option is re-chosen.
Whilst on some browsers you can catch events originating from an <option> (which you could use to trap click and keyboard events if you had the patience to try to reproduce a browser's select handling), this is unstandardised and doesn't work in IE (as it uses native Windows widgets to implement select boxes, which don't give that kind of granular access).
If you need to be able to re-fire an event when the same option is chosen again, what you have doesn't really sound like a select box to me; it could perhaps be better replaced with a scripted pop-up div full of buttons. (There are plenty of scripts that will substitute a select box for a scripted div to give you greater control on browsers where JavaScript is available.)
bind the change AND click event
$select.bind("change click", function (event) { // do something });