I am trying to recreate a "linked" drop down menu by using someone else's code. But for some reason the code isn't executing. I can select the first drop down but it does nothing to the second one.
I use JFiddle and paste code into relevant sections and it worked!
So I am a little lost.
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="//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 type="text/javascript">
function goToNewPage()
{
var url = document.getElementById('store').value;
console.log(url);
if(url != 'none') {
window.location = url;
}
}
</script>
<script type="text/javascript">
$(function(){
var $cat = $("#state"),
$subcat = $(".subcat");
$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);
});
});
</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>
<input type=button value="Go" onclick="goToNewPage()" />
</form>
</body>
</html>
Tried using JFiddle - it worked
I have tested your code. It works on JSFiddle but does not work in plain HTML. The problem is jquery.js failed to load.
you can change that library from
//cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js
to
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js
You can connect two dropdown menus by linking the options in the first dropdown to control the options in the second dropdown. This is often referred to as "cascading dropdowns". Here are the steps to do this:
Determine the options for each dropdown menu and create the HTML code to display the dropdown menus on your webpage.
Use JavaScript or a JavaScript library such as jQuery to create an event listener for the first dropdown menu. This event listener should detect when a user selects an option in the first dropdown and update the options in the second dropdown based on the selection.
In the event listener function, create a conditional statement that checks the selected option in the first dropdown and updates the options in the second dropdown accordingly.
Repeat step 3 for each possible selection in the first dropdown to control the options in the second dropdown.
Test your code to ensure that the options in the second dropdown update correctly based on the selection in the first dropdown.
Related
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.
I am trying to run a code,in which once an option is choosen through a drop down a picture should appear.Not sure but, only the first picture appears(It should be only because I have choosen it to start with) but thereafter nothing changes.Looks like my JS is not working at all.Sorry for posting a basic type,I am new to Javascript/HTML. Code is attached.
Tried keeping the javascript separate and calling it but didnt work.
var pictureList = [
"http://lorempixel.com/400/200/sports/1",
"http://lorempixel.com/400/200/sports/2",
"http://lorempixel.com/400/200/sports/3",
"http://lorempixel.com/400/200/sports/4",
"http://lorempixel.com/400/200/sports/5", ];
$('#picDD').change(function () {
var val = parseInt($('#picDD').val());
$('img').attr("src",pictureList[val]);
});
img {
width:400px;
margin:auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src="http://lorempixel.com/400/200/sports/1" />
<select id="picDD">
<option value="1" selected>Picture 1</option>
<option value="2">Picture 2</option>
<option value="3">Picture 3</option>
<option value="4">Picture 4</option>
<option value="5">Picture 5</option>
</select>
</body>
</html>
You should use jquery library to run your code. Add this script to your HTML code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
If you do not use this library, your select will not working.
Since your base URL is same, you could also refactor the code as below without an array.
$('#picDD').change(function() {
$('img').attr("src",
"http://lorempixel.com/400/200/sports/" + $(this).val());
});
img {
width: 400px;
margin: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="http://lorempixel.com/400/200/sports/1" />
<select id="picDD">
<option value="1" selected>Picture 1</option>
<option value="2">Picture 2</option>
<option value="3">Picture 3</option>
<option value="4">Picture 4</option>
<option value="5">Picture 5</option>
</select>
I have a drop down field on my form. When I select a value from the drop down it immediately resets the focus to the top of the form.
To be clearer I have a drop down menu at the top of the screen and several input fields. The user would have to scroll down to the actual drop down field in order to select it. Once they select the value the page scrolls back to the top.
How can I keep the position the user selected on the form once a user selects a value from the drop down? [NOTE: It will not show up on stack overflow you would have to copy and paste the code and try it on your own browser]
My drop down is setup as:
// creates the page dynamically
function GetSelectedItem(){
var option = document.getElementById("locale").value;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="languageswitcher.css">
<script>
window.onload{
document.getElementById("locale").options[value].selected;
}
</script>
</head>
<body>
<header>
<div id="country-select">
<form action="" method = "get">
<select id= "locale" name="locale">
<option value="en_US">English(US)</option>
<option value="en_GB">English(UK)</option>
<option value="bg_BG">Bulgarian</option>
<option value="cs_CS">Czech</option>
<option value="da_DK">Danish</option>
<option value="de_DE">German</option>
<option value="ek_GR">Greek</option>
<option value="es_ES">Spanish</option>
<option value="et_ET">Estonian</option>
<option value="fi_FI">Finnish</option>
<option value="fr_FR">French</option>
<option value="hu_HU">Hungarian</option>
<option value="it_IT">Italian</option>
<option value="lt_LT">Lithuanian</option>
<option value="lv_LV">Latvian</option>
<option value="nl_NL">Dutch</option>
<option value="no_NO">Norwegian</option>
<option value="pl_PL">Polish</option>
<option value="pt_PT">Portugese</option>
<option value="ro_RO">Romanian</option>
<option value="sk_SK">Slovak</option>
<option value="sl_SL">Slovenian</option>
<option value="sv_SE">Swedish</option>
</select>
<input value="Select" type="submit"/>
</form>
</div>
</header>
<script src="jquery_1.5.min.js"></script>
<script src="languageswitcher.js"></script>
</body>
</html>
The easiest way would be to run a script to jump down to that part of page when you run your window.onload function:
window.onload{
document.getElementById("locale").options[value].selected;
window.location.hash="country-select";
}
You would need to put some extra logic around it as you would only want to do it when a value had been selected but that is the basic code for jumping down the page.
What I am trying to accomplish is the following...
HTML
<!doctype html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<link href="css/jquery.selectbox.css" type="text/css" rel="stylesheet" />
</head>
<body>
<select name="dateselector_parent" id="dateselector_parent" tabindex="1">
<option value="">--Select Date--</option>
<option value="1">2012</option>
<option value="1">2011</option>
<option value="1">2010</option>
<option value="2">Predefined Dates</option>
</select>
<select name="dateselector_child" id="dateselector_child" tabindex="2">
<option value="">--Select Date--</option>
<option value="1">January</option>
<option value="1">February</option>
<option value="1">March</option>
<option value="1">April</option>
<option value="1">May</option>
<option value="1">June</option>
<option value="1">July</option>
<option value="1">August</option>
<option value="1">September</option>
<option value="1">October</option>
<option value="1">November</option>
<option value="1">December</option>
<option value="2">Current Month</option>
<option value="2">Month to Date</option>
<option value="2">Last 7 Days</option>
</select>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.selectbox-0.2.js"></script>
<script type="text/javascript" src="js/datejs.js"></script>
<script type="text/javascript">
$(function () {
$("#dateselector_parent").selectbox();
$("#dateselector_child").selectbox();
});
</script>
</body>
This creates two select boxes, I want one box to display content according to what the user chooses on the other one. For example, if the user chooses, 2010 or 2011 or 2012, I want to display Jan-Dec as options on the second one. If the user chooses, Predefined Dates, I want to display Current Month, Month to Date, and Last 7 Days. The javascript plugin I'm using allows the user to define the onChange, onOpen, and onClose methods. I have been doing some research and it appears that AJAX is involved in trying to accomplish this, but since I don't know one bit of PHP I would like to know if it's possible to accomplish this with jQuery. (I have attempted to solve this problem with no luck of course, I am not looking for someone to do it for me, I just want to be pointed in the right direction, whether I can accomplish this with jQuery or if it's necessary to use AJAX since I haven't seen an example online with only jQuery).
Any help will be appreciated
I hope the following work for your requirement. Having 3 child dropdowns (no divs) 1. --Select--, 2. Jan-Dec 3.Other options
$().ready(function () {
var selectedOnLoad = $('#dateselector_parent').val();
setChild(selectedOnLoad);
$('#dateselector_parent').change(function () {
var selectedValue = $('#dateselector_parent').val();
setChild(selectedValue);
});
});
function setChild(value){
//Have your three child selector names as follows in your markup as well and assuming they are not in divs
var arr = [ "dateselector_child_", "dateselector_child_1", "dateselector_child_2"];
jQuery.each(arr, function() {
if(this == "dateselector_child_" + value){
$("#" + this).show();
}else{
$("#" + this).hide();
}
});
}
UPDATE: Adding markup for the above script
<select name="dateselector_parent" id="dateselector_parent" tabindex="1">
<option value="">--Select Date--</option>
<option value="1">2012</option>
<option value="1">2011</option>
<option value="1">2010</option>
<option value="2">Predefined Dates</option>
</select>
<select name="dateselector_child_" id="dateselector_child_" tabindex="2">
<option value="">--Select Date--</option>
</select>
<select name="dateselector_child_1" id="dateselector_child_1" tabindex="2">
<option value="">--Select Date--</option>
<option value="1">January</option>
<option value="1">February</option>
<option value="1">March</option>
<option value="1">April</option>
<option value="1">May</option>
<option value="1">June</option>
<option value="1">July</option>
<option value="1">August</option>
<option value="1">September</option>
<option value="1">October</option>
<option value="1">November</option>
<option value="1">December</option>
</select>
<select name="dateselector_child_2" id="dateselector_child_2" tabindex="2">
<option value="">--Select Date--</option>
<option value="2">Current Month</option>
<option value="2">Month to Date</option>
<option value="2">Last 7 Days</option>
</select>
Check the setChild(value) function. Parent's selected value is passing to that function when page is ready (just after loading) and also when user change the selection. Parent's selected value could be "","1","2". Next the foreach loop finds the name of the child that needs to show and others are hidden. if user select ---Select--- option of the parent then that function will show "dateselector_child_" and others two hidden.
Hope it's clear now....
Just a startingpoint!
$("#dateselector_parent").change(function() {
$('#dateselector_child').val($(this).find("option:selected").index());
});
Demo
AJAX, expands to Asynchronous JavaScript And XML. It involves writing an XMLHTTPRequest to retrieve the contents from a server.
If you can store your logic (what to display when a certain option is chosen) in a few lines of code, you can embed it in JavaScript or jQuery.
So, in your case, it is not necessary to use AJAX. You can accomplish this with a bit of code in JavaScript.
"Creating a 2 level interdependent select list" might help.
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>