I have the following javascript function.
<script type="text/javascript">
function showhidefields(value,formobj,epsflag,respflag) {
//alert(epsflag);
if (epsflag==0 && respflag==4) {
document.getElementById("tpnr").style.position = "static";
document.getElementById("tpnr").style.top = "0px";
formobj.tussenPersoonNotext.disabled =false;
formobj.email.disabled =true;
}
</script>
<select name="moduleidval" class="validate['required']">
<option value="">-- Selecteer Proces--</option>
<option onclick="showhidefields(this.value,this.form,'<?php echo 1; ?>');"
value="<?php echo $epsmodules; ?>"><?php echo 'MBO'; ?></option>
</select>
My problem is when i click on the option in case of firefox or IE the onclick event fires but in case of chrome it doesnot fire at all.i tried changing the function name also but no luck.
fiddle
thanks in Advance
option elements don't fire the click event in all browsers, you should stray away from relying on this. Instead you can use onchange() event for select. You may use something like this
<html>
<head>
<script type="text/javascript">
function changeFunc() {
var selectBox = document.getElementById("selectBox");
var selectedValue = selectBox.options[selectBox.selectedIndex].value;
alert(selectedValue);
}
</script>
</head>
<body>
<select id="selectBox" onchange="changeFunc();">
<option value="1">Option #1</option>
<option value="2">Option #2</option>`enter code here`
</select>
</body>`enter code here`
</html>
In Your case you use like
<form id='myForm' action="#">
<select id='mySelect' name="moduleidval" class="validate['required']" onchange="showhidefields(this.value,this.form,'0');">
<option value="-">-- Selecteer Proces--</option>
<option value="1"> 'Klantprocessen'</option>
</select>
</form>
Sure, there is no click event on an option tag.
You may listen to the onchange event of the select tag.
<!-- HTML -->
<form id='myForm' action="#">
<select id='mySelect' name="moduleidval" class="validate['required']">
<option value="-">-- Selecteer Proces--</option>
<option value="MBO">MBO</option>
</select>
</form>
// JavaScript
document.getElementById('mySelect').onchange = function(){
alert('value:'+this.value);
alert('form id:' + this.form.id);
}
See Demo here
Few browsers lack in support of onclick event of option tag. Here is the reference
so you can go for onchange of select tag.
You can pass the value directly in the function specified, like:
<select onchange="trig(value);">
This value can then be used in the trig function.
function trig(val) {
//do foo
alert(val);
}
Short and simple.
A working demo in Chrome: http://jsfiddle.net/amarprabhu/9C3VU/
Check javascript is enabled in ur chrome.
Select Customize and control Google Chrome to the right of the address bar
From the drop-down menu, select Settings
At the bottom of the page, click Show advanced settings…
Under Privacy, click the Content settings… button
Under the JavaScript heading, select the Allow all sites to run JavaScript radio button
Related
I am using onclick event in option tag for select box
<select>
<option onclick="check()">one</option>
<option onclick="check()">two</option>
<option onclick="check()">three</option>
</select>`
onclick event is not working on IE and Chrome but it is working fine in firefox,
here I don't want to use onchange event on select tag bcz it will not trigger an event if user selects same option again
Eg:say first time user selects "one" dropdown I will open a popup after processing some stuff user closes the popup,suppose if user wants to select same "one" dropdown it will not trigger any event.this can be solved using onclick event on option tag but its not working on IE and chrome
Is there any work around for this ?
onclick event on option tag will fail on most versions of IE, Safari and Chrome: reference
If you want to trigger an event whenever user select, why not simply use:
<select onclick="check()">
<option>one</option>
<option>two</option>
<option>three</option>
And if you want to do something with the specific option user selected:
<select onclick="if (typeof(this.selectedIndex) != 'undefined') check(this.selectedIndex)">
<option>one</option>
<option>two</option>
<option>three</option>
This way you are guaranteed to call check() if and only if an option is selected.
Edit: As #user422543 pointed out in the comments, this solution will not work in Firefox. I therefore asked another question here: Why does Firefox react differently from Webkit and IE to "click" event on "select" tag?
So far it seems using <select> tag is will not work consistently in all browsers. However, if we simulate a select menu using library such as jQuery UI select menu or Chosen to create a select menu instead of using <select> tag, click event will be fired on <ul> or <li> tag which is consistent in all browsers I tested.
I have another suggestion, it's not 100%, but almost:
<select onchange="valueChanged(this.value); this.selectedindex = -1">
<option style="display: none"></option>
<option value="1"> 1 </option>
<option value="2"> 2 </option>
<option value="3"> 3 </option>
<option value="4"> 4 </option>
</select>
This way the event will be triggered even if the user selected the same option twice.
The hitch is that IE will display the empty option (it ignores the style attribute), but clicking it will not fire the event, since it always starts out as being selected, and therefore selecting it does not trigger onchange...
This emulates an onclick event on your options by recording the number of clicks.
http://jsfiddle.net/yT6Y5/1/
The first click is ignored (used to expand your dropdown),
The second click is effectively your "selection". (The click count is then reset).
It doesn't cater for keyboard interaction though....
Oh and I'm making use of JQuery, but you could re-do it using pure JS
You just have to
put the script above the select,
set onclick and onblur for select as shown in code
and customize the check function.
I have tested it and it works :).
<script>
selectHandler = {
clickCount : 0,
action : function(select)
{
selectHandler.clickCount++;
if(selectHandler.clickCount%2 == 0)
{
selectedValue = select.options[select.selectedIndex].value;
selectHandler.check(selectedValue);
}
},
blur : function() // needed for proper behaviour
{
if(selectHandler.clickCount%2 != 0)
{
selectHandler.clickCount--;
}
},
check : function(value)
{
// you can customize this
alert('Changed! -> ' + value);
}
}
</script>
<select onclick="selectHandler.action(this)" onblur="selectHandler.blur()">
<option value="value-1"> 1 </option>
<option value="value-2"> 2 </option>
<option value="value-3"> 3 </option>
<option value="value-4"> 4 </option>
</select>
Use function(this) in id of select tag
for example
<script type="application/javascript">
var timesSelectClicked = 0;
$(function() {
$(document).on('click keypress', 'select', function (e) {
if (timesSelectClicked == 0)
{
timesSelectClicked += 1;
}
else if (timesSelectClicked == 1)
{
timesSelectClicked = 0;
prompt($('select option:selected').text());
}
});
});
</script>
This code is not working in Google Chrome but is working in Mozilla.
<select>
<option value="2" (click)="myFunction($event)">
<div>2</div>
</option>
<option value="5" (click)="myFunction($event)">
<div>5</div>
</option>
<option value="10" (click)="myFunction($event)">
<div>10</div>
</option>
</select>
This solition is working in Chrome and Mozilla. I didn't test in Safari.;
<select (change)="myFunction($event)">
<option value="2">
<div>2</div>
</option>
<option value="5">
<div>5</div>
</option>
<option value="10">
<div>10</div>
</option>
</select>
This works on different browsers CHROME, FIREFOX, IE, AVAST BROWSER, BRAVE, Etc... And user can change the option as many times as possible with the event still occurring over and over again.
HTML:
<select id="howtopay">
<option selected>Select</option>
<option value="1">ATM - PAYSTACK (Instant Funding)</option>
<option value="2">BANK DEPOSIT/TRANSFER</option>
</select>
JQUERY:
$(function(){
$('#howtopay').change(function() {
if ($(this).val() == "1") {
$('#fund_with_atm').show();
$('#fund_with_bank').hide();
}
else if ($(this).val() == "2") {
//Do Nothing
}
else {
//Do Nothing
}
});
});
If you want to fire onclick event only when user clicks the option use event.detail:
<select onclick="selectFunc(this.children[this.selectedIndex])">
And in your function definition:
function selectFunc(option){
//event.detail = 0 on option click across firefox, chrome, opera, edge
if(!event.detail){
//your code
}
}
I found a good workaround for those wondering.
html:
<select id="n1" onclick="n1c()">
<option id="h" value=undefined disabled selected hidden>Header</option>
<option id="o1" value="v1">one</option>
<option id="o2" value="v2">two</option>
<option id="o3" value="v3">three</option>
</select>
js:
function n1c() {
if (n1.value != undefined) {
if (n1.value == "v1"){
check1()
} else if (n1.value == "v2") {
check2()
} else if (n1.value == "v3") {
check3()
}
}
}
This allows you to run specific targeted javascript functions tailored to what you have selected. It runs both when you select the box and when you make a selection. Using the code below, you can fix/change that to fit your project.
var opt = undefined
function check1() {
if (opt == "opt1") {
console.log("already selected")
} else {
opt = "opt1";
<-- place code here -->
}
}
That's about as good as I've got. It works with both chrome/edge/safari select functionality and firefox/ie select functionality. There may be a way to compact/refine this code, but it gets the job done at least.
I found that the following worked for me - instead on using on click, use on change e.g.:
jQuery('#element select').on('change', (function() {
//your code here
}));
I am using onclick event in option tag for select box
<select>
<option onclick="check()">one</option>
<option onclick="check()">two</option>
<option onclick="check()">three</option>
</select>`
onclick event is not working on IE and Chrome but it is working fine in firefox,
here I don't want to use onchange event on select tag bcz it will not trigger an event if user selects same option again
Eg:say first time user selects "one" dropdown I will open a popup after processing some stuff user closes the popup,suppose if user wants to select same "one" dropdown it will not trigger any event.this can be solved using onclick event on option tag but its not working on IE and chrome
Is there any work around for this ?
onclick event on option tag will fail on most versions of IE, Safari and Chrome: reference
If you want to trigger an event whenever user select, why not simply use:
<select onclick="check()">
<option>one</option>
<option>two</option>
<option>three</option>
And if you want to do something with the specific option user selected:
<select onclick="if (typeof(this.selectedIndex) != 'undefined') check(this.selectedIndex)">
<option>one</option>
<option>two</option>
<option>three</option>
This way you are guaranteed to call check() if and only if an option is selected.
Edit: As #user422543 pointed out in the comments, this solution will not work in Firefox. I therefore asked another question here: Why does Firefox react differently from Webkit and IE to "click" event on "select" tag?
So far it seems using <select> tag is will not work consistently in all browsers. However, if we simulate a select menu using library such as jQuery UI select menu or Chosen to create a select menu instead of using <select> tag, click event will be fired on <ul> or <li> tag which is consistent in all browsers I tested.
I have another suggestion, it's not 100%, but almost:
<select onchange="valueChanged(this.value); this.selectedindex = -1">
<option style="display: none"></option>
<option value="1"> 1 </option>
<option value="2"> 2 </option>
<option value="3"> 3 </option>
<option value="4"> 4 </option>
</select>
This way the event will be triggered even if the user selected the same option twice.
The hitch is that IE will display the empty option (it ignores the style attribute), but clicking it will not fire the event, since it always starts out as being selected, and therefore selecting it does not trigger onchange...
This emulates an onclick event on your options by recording the number of clicks.
http://jsfiddle.net/yT6Y5/1/
The first click is ignored (used to expand your dropdown),
The second click is effectively your "selection". (The click count is then reset).
It doesn't cater for keyboard interaction though....
Oh and I'm making use of JQuery, but you could re-do it using pure JS
You just have to
put the script above the select,
set onclick and onblur for select as shown in code
and customize the check function.
I have tested it and it works :).
<script>
selectHandler = {
clickCount : 0,
action : function(select)
{
selectHandler.clickCount++;
if(selectHandler.clickCount%2 == 0)
{
selectedValue = select.options[select.selectedIndex].value;
selectHandler.check(selectedValue);
}
},
blur : function() // needed for proper behaviour
{
if(selectHandler.clickCount%2 != 0)
{
selectHandler.clickCount--;
}
},
check : function(value)
{
// you can customize this
alert('Changed! -> ' + value);
}
}
</script>
<select onclick="selectHandler.action(this)" onblur="selectHandler.blur()">
<option value="value-1"> 1 </option>
<option value="value-2"> 2 </option>
<option value="value-3"> 3 </option>
<option value="value-4"> 4 </option>
</select>
Use function(this) in id of select tag
for example
<script type="application/javascript">
var timesSelectClicked = 0;
$(function() {
$(document).on('click keypress', 'select', function (e) {
if (timesSelectClicked == 0)
{
timesSelectClicked += 1;
}
else if (timesSelectClicked == 1)
{
timesSelectClicked = 0;
prompt($('select option:selected').text());
}
});
});
</script>
This code is not working in Google Chrome but is working in Mozilla.
<select>
<option value="2" (click)="myFunction($event)">
<div>2</div>
</option>
<option value="5" (click)="myFunction($event)">
<div>5</div>
</option>
<option value="10" (click)="myFunction($event)">
<div>10</div>
</option>
</select>
This solition is working in Chrome and Mozilla. I didn't test in Safari.;
<select (change)="myFunction($event)">
<option value="2">
<div>2</div>
</option>
<option value="5">
<div>5</div>
</option>
<option value="10">
<div>10</div>
</option>
</select>
This works on different browsers CHROME, FIREFOX, IE, AVAST BROWSER, BRAVE, Etc... And user can change the option as many times as possible with the event still occurring over and over again.
HTML:
<select id="howtopay">
<option selected>Select</option>
<option value="1">ATM - PAYSTACK (Instant Funding)</option>
<option value="2">BANK DEPOSIT/TRANSFER</option>
</select>
JQUERY:
$(function(){
$('#howtopay').change(function() {
if ($(this).val() == "1") {
$('#fund_with_atm').show();
$('#fund_with_bank').hide();
}
else if ($(this).val() == "2") {
//Do Nothing
}
else {
//Do Nothing
}
});
});
If you want to fire onclick event only when user clicks the option use event.detail:
<select onclick="selectFunc(this.children[this.selectedIndex])">
And in your function definition:
function selectFunc(option){
//event.detail = 0 on option click across firefox, chrome, opera, edge
if(!event.detail){
//your code
}
}
I found a good workaround for those wondering.
html:
<select id="n1" onclick="n1c()">
<option id="h" value=undefined disabled selected hidden>Header</option>
<option id="o1" value="v1">one</option>
<option id="o2" value="v2">two</option>
<option id="o3" value="v3">three</option>
</select>
js:
function n1c() {
if (n1.value != undefined) {
if (n1.value == "v1"){
check1()
} else if (n1.value == "v2") {
check2()
} else if (n1.value == "v3") {
check3()
}
}
}
This allows you to run specific targeted javascript functions tailored to what you have selected. It runs both when you select the box and when you make a selection. Using the code below, you can fix/change that to fit your project.
var opt = undefined
function check1() {
if (opt == "opt1") {
console.log("already selected")
} else {
opt = "opt1";
<-- place code here -->
}
}
That's about as good as I've got. It works with both chrome/edge/safari select functionality and firefox/ie select functionality. There may be a way to compact/refine this code, but it gets the job done at least.
I found that the following worked for me - instead on using on click, use on change e.g.:
jQuery('#element select').on('change', (function() {
//your code here
}));
I have multiple drop down with same value.If they select Lunch first time from other drop down I have to remove Lunch. Following is my code
Front end code
<?php for($i=1; $i<=7; $i++)
{?>
<select name="task<?php echo $i;?>" onchange="checkSelected(this,<?php echo $i; ?>);" id="task<?php echo $i;?>"
<option value="Testing">Testing</option>
<option value="Lunch">Lunch</option>
<option value="Other">Other</option>
</select>
<?php } ?>
In javascript I am removing 3rd select box (task3) its got removed but i have to remove all the other except the selected one how i can implement this
javascript function
function checkSelected(e,number)
{
if(e.value == 'Lunch')
{
$('#task3 option[value="Lunch"]').remove();
}
}
I tried this but its not working
$("#task+"number"+ > option[value='Lunch']").remove();
It should be
$("#task" + number + " > option[value='Lunch']").remove();
You could use the .each() function to remove only the option that has the value you select from the list.
$('select').change(function(){
var value = $(this).val()
// Probably best to store this value here before removing the option below.
$(this).children().each(function(){
if($(this).val() == value){
$(this).remove();
}
});
});
Working example - http://jsfiddle.net/amQuU/
Example with multiple dropdowns http://jsfiddle.net/amQuU/1/
Example that removes the options from another select box - http://jsfiddle.net/amQuU/2/
The only problem in doing this is that by removing the selected option it is not shown as the selected option. you can however store the value after selecting it and before removing it from the list as commented above.
Another thing you should consider is changing .remove() to .attr('disabled','true') so that you can re-enable the option later on if you need to e.g. someone wants to go back and change the previous select. Here is an example of that too http://jsfiddle.net/amQuU/3/
If only the "lunch" option is concerned by your answer (see my comment above), then there's a solution. It's not already full-optimized, but you see how you can do it.
JSFiddle http://jsfiddle.net/4qndV/1/
HTML
<form action="demo.html" id="myForm">
<p>
<label>First:</label>
<select class="event_handler" name="task1">
<option value="Testing">Testing</option>
<option value="Lunch">Lunch</option>
<option value="Other">Other</option>
</select>
</p>
<p>
<label>Second:</label>
<select class="event_handler" name="task2">
<option value="Testing">Testing</option>
<option value="Lunch">Lunch</option>
<option value="Other">Other</option>
</select>
</p>
<input type="submit" value="Submit">
</form>
JQuery
$(function () {
// Handler for .ready() called.
$(".event_handler").on("change", function () {
event.preventDefault();
var name_select = $(this).attr("name");
if ($(this).val() == "Lunch") {
//Loop through each "lunch" element
$('.event_handler option[value=Lunch]').each(function(){
//Remove all 'lunch' option, except the ont in the 'name_select' select
if($(this).parent().attr("name") != name_select){
$(this).remove();
}
});
}
})
});
NB: I suppose you have to allow the user to change his selection. It's why I use "disable" in place of "remove". But you can easily adapt this code if you really want to remove the option element.
I am new to web development and I'm trying to do this:
I have a <select> and I want the value of the selected option to be one of the parameters of a method that is called whenever a button is clicked.
So for example:
<select id="instructorSelector">
<option value='abrown#gmail.com'>Anna Brown</option>
<option value='jdoe#gmail.com'>Jane Doe</option>
...
</select>
<button onclick="sendEmail(($('#instructorSelector').val()),...,...)" type="button">Send Email</button>
The problem with this is that it doesn't seen to detect when I've actually selected someone. I'm using freemarker templates but a general response as to how I should do this would be helpful too.
Also, how could I make it so the button is not clickable (or even visible) until the user actually selects something from the <select> ?
Thanks in advance! Sorry if this is an overly simple question.
You don't need to pass anything, what you need is a proper event handler:
<select id="instructorSelector">
<option value='abrown#gmail.com'>Anna Brown</option>
<option value='jdoe#gmail.com'>Jane Doe</option>
...
</select>
<button id="btn" type="button">Send Email</button>
JS
$(function() {
$('#btn').hide();
$('#instructorSelector').on('change', function() {
$('#btn').show();
});
$('#btn').on('click', function() {
var select_value = $('#instructorSelector').val();
// use the value here
});
});
I would solve it like this:
disable the button in the beginning using the proper disabled-attribute
toggle this attribute if the value of the box changes, depending on something is selected or not
store the selectors in variables, so you don't need to re-query them all the time
HTML
<select id="instructorSelector">
<option value="">Please select</option>
<option value="abrown#gmail.com">Anna Brown</option>
<option value="jdoe#gmail.com">Jane Doe</option>
</select>
<button class="send_email" type="button" disabled="disabled">Send E-mail</button>
JavaScript
// example of a selector using a class name
var button = $('button.send_email');
// example of using a selector using the id of an element
var selector = $('#instructorSelector');
selector.change(function () {
if ('' == selector.val()) {
button.attr('disabled', 'disabled');
} else {
button.removeAttr('disabled');
}
});
button.click(function(event) {
sendEmail(selector.val());
event.preventDefault();
});
Demo
Try before buy
Try to use .chage() from jQuery http://api.jquery.com/change/ to make button visible
$('#instructorSelector').change(function () {
$('#id-of-the-button').show();
});
In this chang function you can also capture values of option $(this).val()
I highly recommend that you read jQuery Event Basics
You will need to understand how you can use selectors along with events to truly leverage the power of jQuery.
I think after reading about events you will see how click and change will greatly benefits the goals you have for your page.
Simplest Way: http://jsfiddle.net/rA4VJ/
<select id="instructorSelector">
<option value='none' selected>Choose Someone</option>
<option value='abrown#gmail.com'>Anna Brown</option>
<option value='jdoe#gmail.com'>Jane Doe</option>
</select>
<button id="btn" type="button">Send Email</button>
var btn = document.getElementById("btn");
var elm = document.getElementById("instructorSelector");
elm.onchange = function (e) {
if (elm.value != 'none') {
console.log(elm.value);
btn.removeAttribute('disabled');
} else {
btn.setAttribute('disabled', 'disabled');
}
}
If you are using JavaScript, you can have the property onchange on the select, that can trigger a method that could check the value and make visible the the button. Use an option to indicate that there is no selection, and if that is the one selected, hide the button.
<select id="instructorSelector" onchange="something()">
<option value='selectone'>Select one</option>
<option value='abrown#gmail.com'>Anna Brown</option>
<option value='jdoe#gmail.com'>Jane Doe</option>
...
</select>
<button id="button" style="display:none;" onclick="sendEmail(($('instructorSelector').val()),...,...)" type="button">Send Email</button>
function something(){
if ( $('#instructorSelector').val()!='selectone' ) {
document.getElementById("button").style.display = 'block';
}
else{
document.getElementById("button").style.display = 'none';
}
}
As some might know already styling select element is a nightmare, literally impossible without some javascript trickery. The new datalist in HTML5 could serve the same purpose since the user is presented with a list of options and the value is recorded in an input text field.
The limitation here is the list does not appear until the user start typing something in the text field and even then is only shown possible matches based on their input. The behavior I want is that as soon as there is focus on the field the entire list of options become visible.
So I have this code - view on jsbin
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Input - Datalist</title>
</head>
<body>
<input list="categories">
<datalist id="categories">
<option value="Breakfast">Breakfast</option>
<option value="Brunch">Brunch</option>
<option value="Lunch">Lunch</option>
<option value="Dinner">Dinner</option>
<option value="Desserts">Desserts</option>
</datalist>
</body>
</html>
and I'm trying to get that to show with this Javascript:
var catVal = document.getElementsByTagName("input")[0],
cat = document.getElementById("categories");
catVal.style.fontSize = "1.3em";
catVal.addEventListener("focus", function(event){
cat.style.display = "block";
}, false);
Any help would be appreciated,
Cheers
I use the following code:
<input name="anrede"
list="anrede" value="Herr"
onmouseover="focus();old = value;"
onmousedown = "value = '';"
onmouseup="value = old;"/>
<datalist id="anrede">
<option value="Herr" selected></option>
<option value="Frau"></option>
<option value="Fraulein"></option>
</datalist>
mouseover:
Set focus and memorize old value in a -- g l o b a l -- variable
mousedown:
Delete value and show datalist (built in functionality)
mouseup:
Restore old value
Then select new value.
Find this an acceptable workaround towards a combobox.
I hope you like this solution:
I added a “temp” attribute to the input field for storage and once the mouse hovers over the input filed it will save its current value in temp and then delete the value so as to allow the datalist to open.
On mouseout it will restore the field’s value from the variable temp. This solution works great under Chromium that I tested.
As a bonus you can add a placeholder="Click to see all your options"
<input value="Classic" list="myDatalist" temp="" onmouseover="this.temp=this.value; this.value='';" onmouseout="this.value=this.temp;">
<datalist id="myDatalist" open="open">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
In the "Ulrich Berth" response, when clicking on the input, the value in the input will be reset and it will not be possible to select the text inside. You can use this to avoid the problem:
<input id = "input" name="anrede"
list="anrede" value="Herr"
onmouseover="focus();old = value;"
onmousedown = "inputFocus();"
onmouseup="value = old;"/>
<datalist id="anrede">
<option value="Herr" selected></option>
<option value="Frau"></option>
<option value="Fraulein"></option>
</datalist>
function inputFocus(){
var input = document.getElementById("input");
if(input.value == ""){
value = '';
}else{
old = value = input.value;
}
}
Question is pretty old, but it's top search on google and there are no answers to be found so I'll add it here.
To expand datalist on first click you need to set
dataListElement.style.display = "block";
and immediately hide it in next line, so it does not appear as element in your DOM, but it will only expand it under input element.
dataListElement.style.display = "none";
As of today it's not expanded on first click only in Firefox.
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<meta charset=utf-8 />
<title>Input - Datalist</title>
</head>
<body>
<input list="categories" id="categories2" type="text">
<div id="result"></div>
<datalist id="categories">
<option value="Breakfast">Breakfast</option>
<option value="Brunch">Brunch</option>
<option value="Lunch">Lunch</option>
<option value="Dinner">Dinner</option>
<option value="Desserts">Desserts</option>
</datalist>
</body>
</html>
jQuery:
var result='';
$(document).ready(function(){
$('input[type=text]').focus(function(){
$('#categories option').each(function(){
result=result+" "+$(this).val();
});
$('#result').show().html(result);
$('input[type=text]').unbind('focus');
});
$('input[type=text]').blur(function(){
$('#result').hide();
$('input[type=text]').focus(function(){
$('#result').show();
});
});
});
Working JS bin
http://jsbin.com/urupit/4/watch