Applying setInterval to onchange - javascript

<select id="choose-first-unit" class="span-four" onchange="setInterval(recountvol(this), 1000)">
<option value="m3">cubic meters</option>
<option value="cm3">cubic centimeters/milliliters</option>
<option value="dm3">cubic decimeters/litres</option>
<option value="hl">hectolitres</option>
<option value="cl">centilitres</option>
</select>
<select id="choose-second-unit" class="bum" onchange="setInterval(recountvol2(this), 1000)">
<option value="m3-2">cubic meters</option>
<option value="cm3-2">cubic centimeters/millilitres</option>
<option value="dm3-2">cubic decimeters/litres</option>
<option value="hl-2">hectolitres</option>
<option value="cl-2">centilitres</option>
</select>
I'm trying to create a volume converter with javascript and I would like to create a function, which would start converting without any "convert/equals" button. I have two select elements to choose the units and then onchange function which does what I want, but only "onchange". I tried infinite loop, but that was of course laggy, so I tried everything possible with setInterval() function, but I'm out of ideas, the function always executes only once, so I'm writing here.
important HTML:
<select id="choose-first-unit" class="span-four" onchange="setInterval(recountvol(this), 1000)">
<option value="m3">cubic meters</option>
<option value="cm3">cubic centimeters/milliliters</option>
<option value="dm3">cubic decimeters/litres</option>
<option value="hl">hectolitres</option>
<option value="cl">centilitres</option>
</select>
<select id="choose-second-unit" class="bum" onchange="setInterval(recountvol2(this), 1000)">
<option value="m3-2">cubic meters</option>
<option value="cm3-2">cubic centimeters/millilitres</option>
<option value="dm3-2">cubic decimeters/litres</option>
<option value="hl-2">hectolitres</option>
<option value="cl-2">centilitres</option>
</select>
I think that the JS is OK, because the function is executed, but only once, so I am asking: Where in the HTML or JS should I implement the setInterval(), what should I change inside it (the setInterval), or it's by wrong passed parameter (and if yes, can you correct them for me please)?
If that's a bad question for stackoverflow, I'm sorry, I'm new here.


Here's how I would do it without any JS framework.
const firstUnitOptions = document.querySelector("#choose-first-unit")
const secondUnitOptions = document.querySelector("#choose-second-unit")
const firstUnitInput = document.querySelector("#firstUnitInput")
const secondUnitInput = document.querySelector("#secondUnitInput")
setInterval(() => {
const firstOption = firstUnitOptions.value
const secondOption = secondUnitOptions.value
const firstUnit = firstUnitInput.value
const secondUnit = secondUnitInput.value
if(firstOption === "m3" && secondOption === "m3-2") {
secondUnitInput.value = firstUnitInput.value;
}
if(firstOption === "m3" && secondOption === "cm3-2") {
secondUnitInput.value = firstUnitInput.value * 1000
}
/// rest of logic
}, 500)
<select id="choose-first-unit" class="span-four">
<option value="m3">cubic meters</option>
<option value="cm3">cubic centimeters/milliliters</option>
<option value="dm3">cubic decimeters/litres</option>
<option value="hl">hectolitres</option>
<option value="cl">centilitres</option>
</select>
<select id="choose-second-unit" class="bum">
<option value="m3-2">cubic meters</option>
<option value="cm3-2">cubic centimeters/millilitres</option>
<option value="dm3-2">cubic decimeters/litres</option>
<option value="hl-2">hectolitres</option>
<option value="cl-2">centilitres</option>
</select>
<input id="firstUnitInput" type="text" value="1"/>
<input id="secondUnitInput" type="text"/>


You can achieve this using jQuery.
You can achieve what you want from the code below.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Testing</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('select.unit').change(function() {
var selectedUnit = $(this).children("option:selected").val();
console.log(selectedUnit);
});
});
</script>
</head>
<body>
<select id="choose-first-unit" class="span-four unit">
<option value="m3">cubic meters</option>
<option value="cm3">cubic centimeters/milliliters</option>
<option value="dm3">cubic decimeters/litres</option>
<option value="hl">hectolitres</option>
<option value="cl">centilitres</option>
</select>
</body>
</html>

Related

Linking three drop down menu together

I am trying to recreate a "linked" drop down menu by using someone else's code but extend it to link not just 2 but 3. Now my code is working but I am facing 2 problems all to do with the final link!
the final "3rd" drop down (organiser) displays the same organisers doesn't matter which "state" and/or "store" were chosen
the final "3rd" drop down (organiser) doesn't reset to "select the organiser" when new "State" and or "store were picked. The second one "store" does when new "state" is picked.
Thank you for your advice!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
</head>
<body>
<style type="text/css">
.subcat option {
display: none;
}
.subcat option.label {
display: inline;
}
</style>
<script>
function goToNewPage()
{
var url = document.getElementById('organiser').value;
console.log(url);
if(url != 'none') {
window.location = url;
}
}
</script>
<script type="text/javascript">
$(function(){
var $cat = $("#state"),
$subcat = $(".subcat");
$organiser = $(".organiser");
$cat.on("change",function(){
var _rel = $(this).val();
$subcat.find("option").attr("style","");
$subcat.val("");
if(!_rel) return $subcat.prop("disabled",true);
$subcat.find("[rel="+_rel+"]").show();
$subcat.prop("disabled",false);
});
$subcat.on("change",function(){
var _org = $(this).val();
$organiser.find("option").attr("style","");
$organiser.val("");
if(!_org) return $organiser.prop("disabled",true);
$organiser.find("[org="+_org+"]").show();
$organiser.prop("disabled",false); });
});
</script>
<form id="formname" name="Sate-Store">
<select name="state" id="state">
<option value="">Select state</option>
<option value="ma">MA</option>
<option value="me">ME</option>
<option value="nh">NH</option>
</select>
<select disabled="disabled" class="subcat" id="store" name="store">
<option value>Select a store</option>
<!-- MA -->
<option rel="ma" value="ma_store_1">MA Store 1</option>
<option rel="ma" value="http://www.google.com">MA Store 2</option>
<option rel="ma" value="ma_store_3">MA Store 3</option>
<option rel="ma" value="ma_store_4">MA Store 4</option>
<option rel="ma" value="ma_store_5">MA Store 5</option>
<!-- ME -->
<option rel="me" value="me_store_1">ME Store 1</option>
<option rel="me" value="me_store_2">ME Store 2</option>
<option rel="me" value="me_store_3">ME Store 3</option>
<option rel="me" value="me_store_4">ME Store 4</option>
<option rel="me" value="me_store_5">ME Store 5</option>
<!-- MH -->
<option rel="nh" value="nh_store_1">NH Store 1</option>
<option rel="nh" value="nh_store_2">NH Store 2</option>
<option rel="nh" value="nh_store_3">NH Store 3</option>
<option rel="nh" value="nh_store_4">NH Store 4</option>
<option rel="nh" value="nh_store_5">NH Store 5</option>
</select>
<select disabled="disabled" class="organiser" id="organiser" name="organiser">
<option value>Select the organiser</option>
<!-- MA -->
<option org="ma_store_1" value="https://test.com/">Jack</option>
<option org="ma_store_1" value="James">James</option>
<option org="ma_store_1" value="Frank">Frank</option>
</select>
<input type=button value="Go" onclick="goToNewPage()" />
</form>
</body>
</html>
Tried Jfiddle and the code still have the same problem.

Display the selected content of a combo box in HTML

So, I have a combo box made in HTMl.
https://i.stack.imgur.com/5W6kt.png
HTML Code:
<div>
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
Now, what I need to do is, assign an ID to the <div> tag and define an event to the combo box that will call a function in JS code. This function needs to check the selected value of the <div> (combo box) and write it out in inner HTML, like this:
https://i.stack.imgur.com/Fxbv0.png
I know this is probably an easy job but I'm a beginner, don't go hard on me :D.
Edit: SOLVED!
HTML:
<!doctype html>
<html>
<head>
<script type="text/javascript" src="script.js"></script>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<select id="box1" onChange="function1(this);">
<option value="">Volvo</option>
<option value="">Fiat</option>
<option value="">Seat</option>
<option value="">Audi</option>
</select>
<div id="div1"></div>
</body>
</html>
JS:
function function1(element) {
var text = element.options[element.selectedIndex].text;
document.getElementById("div1").innerHTML = "Selection is: " + text;
}

Every Element in HTML has an id is a variable in JS
cars.onchange = function(e){
car.innerText = cars[cars.selectedIndex].value;
}
<select name="cars" id="cars">
<option value="">Select a Car</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select> selection is: <span id='car'></span>

Adding attributes to ahref button using the link already present there

I'm trying to add attributes to link taken from ahref html tag, please can anybody guide me that what am I doing wrong in this?
link will be taken from ahref tag and lang and currency from dropdowns and then the final link will be
"link+"index.php?lang="+lang+"&currency="+currency;"
$(document).ready(function(){
var saveclass = null;
function onChangeHandler() {
const lang = document.querySelector('#lang').value;
const currency = document.querySelector('#currency').value;
var link=document.querySelector('#theButton')..getAttribute('href');
var strLink = link+"index.php?lang="+lang+"&currency="+currency;
document.querySelector('#theButton').setAttribute('href', strLink);
}
onChangeHandler();
document.querySelector('#lang').addEventListener('change', onChangeHandler);
document.querySelector('#currency').addEventListener('change', onChangeHandler);
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="price_billing.js"></script>
</head>
<body>
<select name="" id="lang">
<option value="English">English</option>
<option value="French">French</option>
<option value="Spanish">Spanish</option>
</select>
<select name="" id="currency">
<option value="USD">USD</option>
<option value="EUR">EUR</option>
<option value="MXN">MXN</option>
</select>
Click
<select name="" id="lang">
<option value="English">English</option>
<option value="French">French</option>
<option value="Spanish">Spanish</option>
</select>
<select name="" id="currency">
<option value="USD">USD</option>
<option value="EUR">EUR</option>
<option value="MXN">MXN</option>
</select>
Click
</body>
</html>

I took a crack at this. Looks like you have an extra period [.] in front of getAttribute.
Working code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var saveclass = null;
function onChangeHandler() {
const lang = document.querySelector('#lang').value;
const currency = document.querySelector('#currency').value;
var link=document.querySelector('#theButton').getAttribute('href');
var strLink = link+"/index.php?lang="+lang+"&currency="+currency;
document.querySelector('#theButton').setAttribute('href', strLink);
}
document.querySelector('#lang').addEventListener('change', onChangeHandler);
document.querySelector('#currency').addEventListener('change', onChangeHandler);
});
</script>
<select name="" id="lang">
<option value="English">English</option>
<option value="French">French</option>
<option value="Spanish">Spanish</option>
</select>
<select name="" id="currency">
<option value="USD">USD</option>
<option value="EUR">EUR</option>
<option value="MXN">MXN</option>
</select>
Click
I also took out the extra onChangeHandler(); because you already have change listeners running the function.
While this technically works, I don't recommend it. If a user keeps changing options, it keeps appending the new URL. Examples below:
https://alpha.com/index.php?lang=French&currency=USD
https://alpha.com/index.php?lang=French&currency=USD/index.php?lang=French&currency=EUR
https://alpha.com/index.php?lang=French&currency=USD/index.php?lang=French&currency=EUR/index.php?lang=Spanish&currency=EUR
https://alpha.com/index.php?lang=French&currency=USD/index.php?lang=French&currency=EUR/index.php?lang=Spanish&currency=EUR/index.php?lang=Spanish&currency=MXN
https://alpha.com/index.php?lang=French&currency=USD/index.php?lang=French&currency=EUR/index.php?lang=Spanish&currency=EUR/index.php?lang=Spanish&currency=MXN/index.php?lang=English&currency=MXN
https://alpha.com/index.php?lang=French&currency=USD/index.php?lang=French&currency=EUR/index.php?lang=Spanish&currency=EUR/index.php?lang=Spanish&currency=MXN/index.php?lang=English&currency=MXN/index.php?lang=English&currency=USD
It would be better to change the URL after users are 100% sure of their options instead of on every single change.

How to disable the options in jquery chosen page load event?

Hi I am developing jquery application. I have one dropdownlistbox with jquery chosen. Whenever I load my page first time by default I want to hide some of the options in dropdown. For example, Below is my dropdownlistbox,
<select class="limitedNumbSelect2" multiple="true">
<option value="1">Monday</option>
<option value="2">Tuesday</option>
<option value="3">Wednesday</option>
<option value="4">Thursday</option>
<option value="5">Friday</option>
<option value="6">Saturday</option>
<option value="6">Sunday</option>
</select>
This is my java script code.
$(function () {
$(".chosen-select").chosen();
});
$(document).ready(function () {
jQuery('.limitedNumbSelect2 li:contains("Monday")').hide();
});
The above code does not work as expected. It does not hide Monday on page load. May I get some help here? Thank you all.

To fix this you can remove the required option element before you instantiate the Chosen library on the select, like this:
$(function() {
$(".limitedNumbSelect2").find('option:contains("Monday")').remove().end().chosen();
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.jquery.min.js"></script>
<select class="limitedNumbSelect2" multiple="true">
<option value="1">Monday</option>
<option value="2">Tuesday</option>
<option value="3">Wednesday</option>
<option value="4">Thursday</option>
<option value="5">Friday</option>
<option value="6">Saturday</option>
<option value="6">Sunday</option>
</select>
Alternatively if you have no alternative but to amend the option elements after calling chosen(), then you can use the chosen:updated event to manually update the shown options:
$(function() {
var $chosen = $(".limitedNumbSelect2").chosen();
// your other code here...
$chosen.find('option:contains("Monday")').remove();
$chosen.trigger("chosen:updated");
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.jquery.min.js"></script>
<select class="limitedNumbSelect2" multiple="true">
<option value="1">Monday</option>
<option value="2">Tuesday</option>
<option value="3">Wednesday</option>
<option value="4">Thursday</option>
<option value="5">Friday</option>
<option value="6">Saturday</option>
<option value="6">Sunday</option>
</select>

I think that the better way is by hiding options by its value and not by its text.
So, you can write:
$('.limitedNumbSelect2 option[value="1"]').hide();
In your code you mention 'li' element that is not present at all...

You have a typo in your code:
jQuery('.limitedNumbSelect2 option:contains("Monday")').hide();

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