I have an input associated with a datalist and I want to use a button to write in the input, but I can't reproduce the event which open the list.
The datalist is filtered but I have to click on the input to open the list...
click() and focus() don't work, any ideas?
Look at the snippet, when I click on the button 'A', the datalist doesn't open.
function myFunction() {
document.getElementById('ice-cream-flavors').click();
document.getElementById('ice-cream-choice').value += 'A';
}
<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />
<datalist id="ice-cream-flavors">
<option value="Chocolate">
<option value="Coconut">
<option value="Mint">
<option value="Strawberry">
<option value="Vanilla">
</datalist>
<button onclick='myFunction()'>A</button>
Datalist is not supported by all browsers and it is not handled the same way. I recommend you switch to something such as flexselect: https://rmm5t.github.io/jquery-flexselect/
This might not give you the answer you wanted, but there's no solution that will work for datalist (on all browsers). You can hack your way around and make it work on Chrome or Firefox, but even that will be hard to do because Google and Mozilla have completely restricted the usage of untrusted events/triggers . Read about this here: https://www.chromestatus.com/features/5718803933560832 https://www.chromestatus.com/features/6461137440735232
Also initMouseEvent is deprecated, so are all other low-level methods that would have allowed you to create this behaviour in the past
I gave this answer to another similar question just a few moments ago: How to show datalist with javascript?
Related
I do not see why onfocus='myFunction()' works in a an input, but not in an option, for example:
<input type="text" id="fname" onfocus="myFunction()">
calls myFunction when you click on it or when you tab into it, but:
<select multiple>
<option onfocus="myFunction()">whatever</option>
</select>
Does not work when you step in the option.
Why is this? I cannot find a documentation which says what events work on what elements. I have seen this for a long time, but now I want to know why
EDIT:
I am using Chrome.
Please look at the MDM web docs
For onfocus to fire on non-input elements, they must be given the tabindex attribute
So in other terms: give the option with the focus event a tabIndex! The example below should work.
function myFunction() {
console.log("focus");
}
function myFunction2() {
console.log("focus2");
}
<select multiple>
<option tabIndex="0" onfocus="myFunction()">whatever</option>
<option tabIndex="0" onfocus="myFunction2()">whatever2</option>
</select>
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>
At work we had a handy coworker who made a bookmark that auto-filled our ID in textfields on a webpage using javascript that worked wonders. However my company changed the textfields to a dropdown and it no longer works. I've been digging around for a while and I can't seem to find a solution that works. I have very little experience with javascript though. This is what the code was for the textfields:
javascript:{document.getElementById('ID').value=%12345%22;document.getElementById('vendor').value=%2212345%22;void(0)}
I'm guessing the problematic part is the ".value=%" part? Do I need to put something else for a dropdown list?
It could be due to %12345%22 must be between quotations.
javascript:{document.getElementById('ID').value='%12347%22';}
<select id="ID">
<option value="%12346%22">Masoud</option>
<option value="%12347%22">Yoleaux</option>
<option value="%12348%22">Test1</option>
<option value="%12349%22">Test2</option>
</select>
If it is not your actual problem please provide more information.
I have a datalist tag which allows my users to have a suggestion box. Now i know that this feature is not supported in safari. So what can i do to solve this issue?
Here is my code - I'm actually populating my values with database dynamically..
<select id="select_departure_city"style="border-radius:6px" onchange="this.nextElementSibling.value = $('#select_departure_city option:selected').text().trim()"></select>
<input id="input_departure_city" class="form-control admin-input width-80 height-34p padding-0" name="departure_city" type="text" list="listDepartureCity" />
<datalist id="listDepartureCity" ></datalist>
Before posting this i tired many solutions but none of them is worked for me.
I tired
HTML5 datalist tag is not populating in Safari
Datalist not working in Safari
GitHub Help1
GitHub Help2
As in these posts, Select tag with in datalist tag is solution like this.
<datalist id="languages">
<select>
<option value="JavaScript">JavaScript</option>
<option value="Haskell">Haskell</option>
</select></datalist>
But in my case Options tag are not place within select tag after populating dynamically. My code after adding select is as below
<datalist id="listDepartureCity">
<select></select>
<option value="JavaScript">JavaScript</option>
<option value="Haskell">Haskell</option>
</datalist>
How can I solve this?
If you need to use a feature that's not widely supported by all browsers, chances are you'll need a polyfill. Here's one for datalist that might work for you: https://github.com/thgreasi/datalist-polyfill
My code works perfect in firefox and gives error in IE. any ideas?
I have a dropdown with various options, I am trying to show/hide options in another dropdown based on the selected value.
function selectNames() {
var Name = $("#SelectName").attr("value");
$("."+Name).each(function() {
$(this).hide();
});
}
<select >
<option class="Name1" value="SomeName1" </option>
<option class="Name2" value="SomeName2" </option>
</select>
<select id="SelectName" onchange="javascript:selectNames();" >
<option value="Name1" </option>
<option value="Name2" </option>
</select>
Any help is appreciated..
Make sure you close the start tag. Try to use this:
<select>
<option class="Name1" value="SomeName1" />
<option class="Name2" value="SomeName2" />
</select>
<select id="SelectName" onchange="javascript:selectNames();" >
<option value="Name1" />
<option value="Name2" />
</select>
Seems to work for me in IE8.
It won't work in IE & Chrome
check out in IE or Chrome
The best alternative that you can do is to remove the option rather than hiding it.(you should keep a copy of the original options before removing it.)
var copy = $("."+Name).clone();
function selectNames() {
$("#thefirstselect option").remove();
copy.appendTo("#thefirstselect");
var Name = $("#SelectName").val();
$("."+Name).each(function() {
$(this).remove();
});
}
Your markup is not correct. You are each option open tag isn't properly closed.
Also, the specs do not specify CSS changes to individual option tags, though it does work on Firefox.
In simpler words, you cannot hide individual inputs - in which case, you'll have to remove them.
If this is a direct copy and paste then you need to close the select options to look like this:
<option value="Name1">Name1</option>
<option value="Name2">Name2</option>
I would suggest having two selects that you show and hide. Show and hide of options sounds risky.
Also, make sure you set the hidden select to attr('disabled','disabled')/disabled="disabled" and then when you unhide it undo that with removeAttr('disabled'). This is to prevent the hidden select from posting data to the server when you have multiple selects with the same name="...".
If you must use a single select, you may want to appendTo/remove the options, but that is up to you. If show/hide works in all browsers, go for it.
Sadly, you just can't.
IE don't support hide of individual options in a select, neither Chrome or Opera.
This feature isn't cross browser.
What you can do is remove the option and add it again later...