Display the value of a select list without a button - javascript

How can I get the value to be displayed after the selection from the list is made, without the use of a button. I tried to implement an onChange event for the select list, and doing away with the button, but I can't get it to work. I'd like the value (1,2,3) to display below the select box after an option (a,b,c) is selected.
<script>
function displayResult() {
this.nextSibling.nodeValue = document.getElementById("mySelect").value;
}
</script>
<body>
<form>
<select id="mySelect" style="width:220px">
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
</select>
</form>
<button type="button" onclick="displayResult.call(this)">List Locations</button>
http://jsfiddle.net/8ZkR2/


If you are using JQuery you can do this:
HTML:
<form>
<select id="mySelect" style="width:220px">
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
</select>
<div id="myDiv"></div>
</form>
JS:
$(document).ready(function() {
$('#mySelect').on('change', function () {
$('#myDiv').html(this.value);
});
});
Fiddle: http://jsfiddle.net/qv7cj/


Using jQuery:
$('#mySelect').change(function(){
//do stuff
})


<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).on('ready', function(){
$('#mySelect').on('change', function(){
console.log($('#mySelect').find('option:selected').attr('value'));
})
});
</script>
</head>
<body>`enter code here`
<form>
<select id="mySelect" style="width:220px">
<option value="1">a</option>`enter code here`
<option value="2">b</option>
<option value="3">c</option>
</select>
</form>
<button type="button" onclick="displayResult.call(this)">List Locations</button>
</body>
</html>
pls try this

Related

Display value in select tag instead of text

I want to create a dropdown list, which should display value instead of text.
But, when I click the dropdown, the option should display the text instead of value.
I have added an example here, but it is not working as expected:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<select>
<option name="One" value="1">One</option>
<option name="Two" value="2">Two</option>
<option name="Three" value="3">Three</option>
<option name="Four" value="4">Four</option>
</select>
<script>
$(document).ready(function() {
$('select').click(function() {
$('select :selected').text($('select :selected').val());
});
});
</script>
</body>
</html>
This is a picture of the example.

Try this
$(document).ready(function() {
$("select option[value="+$('select option:selected').val()+"]").css({"background-color":"#0000ff","color":"#fff"});
$('select').change(function() {
$('select option')[0].value=$('select option:selected').val();
$('select option')[0].innerHTML=$('select option:selected').val();
$("select").val($('select option:selected').val());
$("select option").css({"background-color":"","color":""});
$("select option[value="+$('select option:selected').val()+"]").css({"background-color":"#0000ff","color":"#fff"});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option name="One" value="1" style="display:none">1</option>
<option name="One" value="1">One</option>
<option name="Two" value="2">Two</option>
<option name="Three" value="3">Three</option>
<option name="Four" value="4">Four</option>
</select>
I have created an extra option which will be display none. Now whenever user will change any option I will change the value and text of the 1st element which is not displaying and Then setting the first value to be selected

Html select using select to change the link of a button with Javascript

I tried to find a solution with the stackoverflow search but I did not understand what I found.
Basically I want to have a List from which I can choose a value, which changes a link from the button. I think I need Javascript for it, so I want to ask you, how the code would look like?
EDIT:
So basically i want choose one option of the select, and every option has an own link to another html page. If i click on a button the html page of the chosen option opens. How do I do it with Java Script?
<form action="select.html">
<select name="Bundesländer" size="16">
<option selected>Baden-Würtemberg</option>
<option>Bayern</option>
<option>Berlin</option>
<option>Brandenburg</option>
<option>Bremen</option>
<option>Hamburg</option>
<option>Hessen</option>
<option>Mecklenburg Vorpoomern</option>
<option>Niedersachsen</option>
<option>NRW</option>
<option>Rheinland</option>
<option>Saarland</option>
<option>Sachsen</option>
<option>Sachsen-Anhalt</option>
<option>Schleswig-Holstein</option>
<option>Thüringen</option>
</select>
</form>

Just check it. Hope this is what you want.
function selectFunction() {
var x = document.getElementById("selectopt").value;
document.getElementById("mylink").innerHTML = x;
document.getElementById("mylink").href = "http://www." + x + ".com";
}
<form action="select.html">
<select id="selectopt" onchange="selectFunction(this);" name="Bundesländer" size="16">
<option selected>Baden-Würtemberg</option>
<option>Bayern</option>
<option>Berlin</option>
<option>Brandenburg</option>
<option>Bremen</option>
<option>Hamburg</option>
<option>Hessen</option>
<option>Mecklenburg Vorpoomern</option>
<option>Niedersachsen</option>
<option>NRW</option>
<option>Rheinland</option>
<option>Saarland</option>
<option>Sachsen</option>
<option>Sachsen-Anhalt</option>
<option>Schleswig-Holstein</option>
<option>Thüringen</option>
</select>
</form>
<a id="mylink" style="position:absolute;top:0;right:0;" href="http://google.com">Link</a>

You can use this code:
<script type="text/javascript">
function redirect(select) {
window.location = select.options[select.selectedIndex].getAttribute('data-link');
}
</script>
<form action="select.html">
<select name="Bundesländer" size="16" onChange="redirect(this)">
<option data-link="http://www.google.fr/" selected>Baden-Würtemberg</option>
<option data-link="http://www.google.com/">Bayern</option>
<option data-link="http://www.google.de/">Berlin</option>
<option data-link="http://www.google.it/">Brandenburg</option>
<option data-link="http://www.google.be/">Bremen</option>
<option data-link="http://www.google.be/">Hamburg</option>
<option data-link="http://www.google.be/">Hessen</option>
<option data-link="http://www.google.be/">Mecklenburg Vorpoomern</option>
<option data-link="http://www.google.be/">Niedersachsen</option>
<option data-link="http://www.google.be/">NRW</option>
<option data-link="http://www.google.be/">Rheinland</option>
<option data-link="http://www.google.be/">Saarland</option>
<option data-link="http://www.google.be/">Sachsen</option>
<option data-link="http://www.google.be/">Sachsen-Anhalt</option>
<option data-link="http://www.google.be/">Schleswig-Holstein</option>
<option data-link="http://www.google.be/">Thüringen</option>
</select>
</form>

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('select').change(function () {
$('#btn').attr('url_value', $(this).val());
});
$('#btn').click(function () {
window.open($(this).attr('url_value'));
// alert($(this).attr('url_value'))
});
});
</script>
<body>
<form >
<input type="button" value="Open Selected" id="btn" url_value=""/>
<select name="Bundes" >
<option selected>Baden-</option>
<option>http://www.w3schools.com</option>
<option>http://www.gmail.com</option>
<option>Brandenburg</option>
<option>Bremen</option>
<option>Hamburg</option>
<option>Hessen</option>
<option>Mecklenburg </option>
<option>Niedersachsen</option>
<option>NRW</option>
<option>test</option>
<option>Saarland</option>
<option>Sachsen</option>
<option>Sachsen-</option>
<option>Schleswig-Holstein</option>
<option>Thüringen</option>
</select>
</form>
</body>
</html>

I think you want to change the action in the form based on selected option.
Use the code bellow:
<!DOCTYPE html>
<html>
<body>
<form action="Bayern.html" id="form" name="form" accept-charset="UTF-8">
<input type="submit">
</form>
<select id="dropwdown" name="dropwdown" onchange="chgAction();">
<option selected>Bayern</option>
<option>Berlin</option>
<option>Brandenburg</option>
<option>Bremen</option>
<option>Hamburg</option>
<option>Hessen</option>
<option>Mecklenburg Vorpoomern</option>
<option>Niedersachsen</option>
<option>NRW</option>
<option>Rheinland</option>
<option>Saarland</option>
<option>Sachsen</option>
<option>Sachsen-Anhalt</option>
<option>Schleswig-Holstein</option>
<option>Thüringen</option>
</select>
<script>
function chgAction()
{
var selectedOption = document.getElementById("dropwdown").value;
if(selectedOption == "Hessen" ) {
document.getElementById('form').action = "Hessen.html";
}
else if(selectedOption == "NRW" ) {
document.getElementById('form').action = "NRW.html";
}
//Apply the same logic for each option ...
}
</script>
</body>
</html>

Option in select with span text

External system generates translations and replace literals with span text on the page. It works perfectly fine for the most of places but it doesn't work with options in select. They support only text. As the result my page has the issue like here SQL Fiddle sample.
<select class="ProductInfo" >
<option value=""></option>
<option value="0"><span class='translation'>Opt1</span></option>
<option value="1"><span class='translation'>Opt2</span></option>
</select>
I want some jquery/javascript function that would replace option content with just text and remove wrapper in above.
Expected result:
<select class="ProductInfo" >
<option value=""></option>
<option value="0">Opt1</option>
<option value="1">Opt2</option>
</select>

It is best to fix in the template itself, if that is not possible you can try something like
$('.ProductNoInfo option').text(function(i, t) {
return $(t).text()
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="ProductNoInfo">
<option value=""></option>
<option value="0"><span class='translation'>Opt1</span></option>
<option value="1"><span class='translation'>Opt2</span></option>
</select>

Try using decodeURICompoenent
$("select option").each(function() {
this.textContent = $(decodeURIComponent(this.textContent)).text()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select class="ProductInfo" >
<option value=""></option>
<option value="0"><span class='translation'>Opt1</span></option>
<option value="1"><span class='translation'>Opt2</span></option>
</select>

Try this,
$('.ProductNoInfo option').each(function(){
$(this).text($(this).find('span').text());
});

<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
$('.ProductInfo option').each(function () {
this.textContent = $(decodeURIComponent(this.textContent)).text()
});
});
</script>
</head>
<body>
<select class="ProductInfo" >
<option value=""></option>
<option value="0"><span class='translation'>Opt1</span></option>
<option value="1"><span class='translation'>Opt2</span></option>
</select>
</body>
</html>

Forms affect other forms and submit button Disable/enable

I should compose a page which there is more packages.
Firstly; visitors have to select person number, after selection Start button will enable and when visitor push button redirect to form4.html with get method.
When I put 3 Forms all forms affect the others.
Please Help Me
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.2.js'></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.js"></script>
<!----Drop Down And Submit - Start----->
<script type='text/javascript'>//<![CDATA[
$(function(){
$(document).ready(function() {
//Start Buttons
$(".nextbutton").button({ disabled: true });
$('.dropdown').change(function() {
if ($('.dropdown').val() == 0) {
$(".nextbutton").button({ disabled: true });
} else {
$(".nextbutton").button({ disabled: false });
}
});
});
});//]]>
</script>
<!----Drop Down And Submit - End----->
<script type="text/javascript">
function submitform()
{
document.forms["drop_list"].submit();
}
</script>
</head>
<body>
<h3>PACKAGE - 1 </h3>
<form name="drop_list" action="../../form/form4.html" method="get" class="j-forms j-multistep">
<form name="drop_list" action="../../form/form4.html" method="get" class="j-forms j-multistep">
<select name="select" class="dropdown">
<option value=''>Person Number</option>
<option value="Person-1">1</option>
<option value="Person-2">2</option>
<option value="Person-3">3</option>
<option value="Person-4">4</option>
<option value="Person-5">5</option>
<option value="Person-6">6</option>
<option value="Person-7">7</option>
<option value="Person-8">8</option>
<option value="Person-9">9</option>
</select><br><br>
<input class="nextbutton" value="Start" type="button" onClick="submitform()"></form>
<br>_____________________________________________________________________<br>
<h3>PACKAGE - 2 </h3>
<form name="drop_list" action="../../form/form4.html" method="get" class="j-forms j-multistep">
<select name="select" class="dropdown">
<option value=''>Person Number</option>
<option value="Person-1">1</option>
<option value="Person-2">2</option>
<option value="Person-3">3</option>
<option value="Person-4">4</option>
<option value="Person-5">5</option>
<option value="Person-6">6</option>
<option value="Person-7">7</option>
<option value="Person-8">8</option>
<option value="Person-9">9</option>
</select><br><br>
<input class="nextbutton" value="Start" type="button" onClick="submitform()"></form>
<br>_____________________________________________________________________<br>
<h3>PACKAGE - 3 </h3>
<form name="drop_list" action="../../form/form4.html" method="get" class="j-forms j-multistep">
<select name="select" class="dropdown">
<option value=''>Person Number</option>
<option value="Person-1">1</option>
<option value="Person-2">2</option>
<option value="Person-3">3</option>
<option value="Person-4">4</option>
<option value="Person-5">5</option>
<option value="Person-6">6</option>
<option value="Person-7">7</option>
<option value="Person-8">8</option>
<option value="Person-9">9</option>
</select><br><br>
<input class="nextbutton" value="Start" type="button" onClick="submitform()"></form>
</body>
</html>

Like i said in the comment to your question, one of your problems is that you actually change all the buttons of class .nextbutton at once.
You could change your change-function to
$('.dropdown').change(function() {
$(this.form).find('.nextbutton').button({ disabled: this.value === '' });
});
What is does is using this that is the element that triggered the function. By using this.form I get the form of that element. And with that I only change the button on the current form.
I also got rid of the if-statement, because that was a Boolean expression, and the disabled-property is also a Boolean.

How to use onClick() or onSelect() on option tag in a JSP page?

How to use onClick() or onSelect() with option tag? Below is my code in which I tried to implement that, but it is not working as expected.
Note: where listCustomer domain object list getting in JSP page.
<td align="right">
<select name="singleSelect" ">
<c:forEach var="Customer" items="${listCustomer}" >
<option value="" onClick="javascript:onSelect(this);> <c:out value="${Customer}" /></option>
</c:forEach>
</select>
</td>
How do I modify it to detect that an option is selected?

Neither the onSelect() nor onClick() events are supported by the <option> tag. The former refers to selecting text (i.e. by clicking + dragging across a text field) so can only be used with the <text> and <textarea> tags. The onClick() event can be used with <select> tags - however, you probably are looking for functionality where it would be best to use the onChange() event, not onClick().
Furthermore, by the look of your <c:...> tags, you are also trying to use JSP syntax in a plain HTML document. That's just... incorrect.
In response to your comment to this answer - I can barely understand it. However, it sounds like what you want to do is get the value of the <option> tag that the user has just selected whenever they select one. In that case, you want to have something like:
<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>
</select>
</body>
</html>

Even more simplified: You can pass the value attribute directly!
<html>
<head>
<script type="text/javascript">
function changeFunc(i) {
alert(i);
}
</script>
</head>
<body>
<select id="selectBox" onchange="changeFunc(value);">
<option value="1">Option #1</option>
<option value="2">Option #2</option>
</select>
</body>
</html>
The alert will either return 1 or 2.

The answer you gave above works but it is confusing because you have used two names twice and you have an unnecessary line of code. you are doing a process that is not necessary.
it's a good idea when debugging code to get pen and paper and draw little boxes to represent memory spaces (i.e variables being stored) and then to draw arrows to indicate when a variable goes into a little box and when it comes out, if it gets overwritten or is a copy made etc.
if you do this with the code below you will see that
var selectBox = document.getElementById("selectBox");
gets put in a box and stays there you don't do anything with it afterwards.
and
var selectBox = document.getElementById("selectBox");
is hard to debug and is confusing when you have a select id of selectBox for the options list . ---- which selectBox do you want to manipulate / query / etc is it the local var selectBox that will disappear or is it the selectBox id you have assigned to the select tag
your code works until you add to it or modify it then you can easily loose track and get all mixed up
<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>
</select>
</body>
</html>
a leaner way that works also is:
<html>
<head>
<script type="text/javascript">
function changeFunc() {
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>
</select>
</body>
</html>
and it's a good idea to use descriptive names that match the program and task you are working on am currently writing a similar program to accept and process postcodes using your code and modifying it with descriptive names the object is to make computer language as close to natural language as possible.
<script type="text/javascript">
function Mapit(){
var actualPostcode=getPostcodes.options[getPostcodes.selectedIndex].value;
alert(actualPostcode);
// alert is for debugging only next we go on to process and do something
// in this developing program it will placing markers on a map
}
</script>
<select id="getPostcodes" onchange="Mapit();">
<option>London North Inner</option>
<option>N1</option>
<option>London North Outer</option>
<option>N2</option>
<option>N3</option>
<option>N4</option>
// a lot more options follow
// with text in options to divide into areas and nothing will happen
// if visitor clicks on the text function Mapit() will ignore
// all clicks on the divider text inserted into option boxes
</select>

in this example de select tag is named as: aula_clase_cb
<select class="form-control" id="aula_clase_cb" >
</select>
document.getElementById("aula_clase_cb").onchange = function(e){
id = document.getElementById('aula_clase_cb').value;
alert("id: "+id);
};

<div class="form-group">
<script type="text/javascript">
function activa(){
if(v==0)
document.formulario.vr_negativo.disabled = true;
else if(v==1)
document.formulario.vr_negativo.disabled = true;
else if(v==2)
document.formulario.vr_negativo.disabled = true;
else if(v==3)
document.formulario.vr_negativo.disabled = true;
else if(v==4)
document.formulario.vr_negativo.disabled = true;
else if(v==5)
document.formulario.vr_negativo.disabled = true;
else if(v==6)
document.formulario.vr_negativo.disabled = false;}
</script>
<label>¿Qué tipo de vehículo está buscando?</label>
<form name="formulario" id="formulario">
<select name="lista" id="lista" onclick="activa(this.value)">
<option value="0">Vehiculo para la familia</option>
<option value="1">Vehiculo para el trabajo</option>
<option value="2">Camioneta Familiar</option>
<option value="3">Camioneta de Carga</option>
<option value="4">Vehiculo servicio Publico</option>
<option value="5">Vehiculo servicio Privado</option>
<option value="6">Otro</option>
</select>
<br />
<input type="text" id="form vr_negativo" class="form-control input-xlarge" name="vr_negativo"/>
</form>
</div>

You can change selection in the function
window.onload = function () {
var selectBox = document.getElementById("selectBox");
selectBox.addEventListener('change', changeFunc);
function changeFunc() {
alert(this.value);
}
}
<!DOCTYPE html>
<html>
<head>
<title>Selection</title>
</head>
<body>
<select id="selectBox" onChange="changeFunc();">
<option> select</option>
<option value="1">Option #1</option>
<option value="2">Option #2</option>
</select>
</body>
</html>

<html>
<head>
<title>Cars</title>
</head>
<body >
<h1>Cars</h1>
<p>Name </p>
<select id="selectBox" onchange="myFunction(value);">
<option value="volvo" >Volvo</option>
<option value="saab" >Saab</option>
<option value="mercedes">Mercedes</option>
</select>
<p id="result"> Price : </p>
<script>
function myFunction($value)
{
if($value=="volvo")
{document.getElementById("result").innerHTML = "30L";}
else if($value=="saab")
{document.getElementById("result").innerHTML = "40L";}
else if($value=="mercedes")
{document.getElementById("result").innerHTML = "50L";}
}
</script>
</body>
</html>```

Other option, for similar example but with anidated selects, think that you have two select, the name of the first is "ea_pub_dest" and the name of the second is "ea_pub_dest_2", ok, now take the event click of the first and display the second.
<script>
function test()
{
value = document.getElementById("ea_pub_dest").value;
if ( valor == "value_1" )
document.getElementById("ea_pub_dest_nivel").style.display = "block";
}
</script>

Change onClick() from with onChange() in the . You can send the option value to a javascript function.
<select id="selector" onChange="doSomething(document.getElementById(this).options[document.getElementById(this).selectedIndex].value);">
<option value="option1"> Option1 </option>
<option value="option2"> Option2 </option>
<option value="optionN"> OptionN </option>
</select>

If you need to change the value of another field, you can use this:
<input type="hidden" id="mainvalue" name="mainvalue" value="0">
<select onChange="document.getElementById('mainvalue').value = this.value;">
<option value="0">option 1</option>
<option value="1">option 2</option>
</select>

example dom onchange usage:
<select name="app_id" onchange="onAppSelection(this);">
<option name="1" value="1">space.ecoins.beta.v3</option>
<option name="2" value="2">fun.rotator.beta.v1</option>
<option name="3" value="3">fun.impactor.beta.v1</option>
<option name="4" value="4">fun.colorotator.beta.v1</option>
<option name="5" value="5">fun.rotator.v1</option>
<option name="6" value="6">fun.impactor.v1</option>
<option name="7" value="7">fun.colorotator.v1</option>
<option name="8" value="8">fun.deluxetor.v1</option>
<option name="9" value="9">fun.winterotator.v1</option>
<option name="10" value="10">fun.eastertor.v1</option>
<option name="11" value="11">info.locatizator.v3</option>
<option name="12" value="12">market.apks.ecoins.v2</option>
<option name="13" value="13">fun.ecoins.v1b</option>
<option name="14" value="14">place.sin.v2b</option>
<option name="15" value="15">cool.poczta.v1b</option>
<option name="16" value="16" id="app_id" selected="">systems.ecoins.launch.v1b</option>
<option name="17" value="17">fun.eastertor.v2</option>
<option name="18" value="18">space.ecoins.v4b</option>
<option name="19" value="19">services.devcode.v1b</option>
<option name="20" value="20">space.bonoloto.v1b</option>
<option name="21" value="21">software.devcode.vpnfree.uk.v1</option>
<option name="22" value="22">software.devcode.smsfree.v1b</option>
<option name="23" value="23">services.devcode.smsfree.v1b</option>
<option name="24" value="24">services.devcode.smsfree.v1</option>
<option name="25" value="25">software.devcode.smsfree.v1</option>
<option name="26" value="26">software.devcode.vpnfree.v1b</option>
<option name="27" value="27">software.devcode.vpnfree.v1</option>
<option name="28" value="28">software.devcode.locatizator.v1</option>
<option name="29" value="29">software.devcode.netinfo.v1b</option>
<option name="-1" value="-1">none</option>
</select>
<script type="text/javascript">
function onAppSelection(selectBox) {
// clear selection
for(var i=0;i<=selectBox.length;i++) {
var selectedNode = selectBox.options[i];
if(selectedNode!=null) {
selectedNode.removeAttribute("id");
selectedNode.removeAttribute("selected");
}
}
// assign id and selected
var selectedNode = selectBox.options[selectBox.selectedIndex];
if(selectedNode!=null) {
selectedNode.setAttribute("id","app_id");
selectedNode.setAttribute("selected","");
}
}
</script>

In my case:
<html>
<head>
<script type="text/javascript">
function changeFunction(val) {
//Show option value
console.log(val.value);
}
</script>
</head>
<body>
<select id="selectBox" onchange="changeFunction(this)">
<option value="1">Option #1</option>
<option value="2">Option #2</option>
</select>
</body>
</html>

focus clears value, so select any value is a change and fires myFunc(this) and blur defocus for reselect
<html>
<head>
<script type="text/javascript">
function myFunc(el) {
//Show option value
console.log(el.value);
}
</script>
</head>
<body>
<select id="selectBox" onchange="myFunc(this);this.blur();" onfocus="this.selectedIndex = -1;">
<option value="1">Option #1</option>
<option value="2">Option #2</option>
</select>
</body>
</html>

Categories