I am banging my head against a wall here. Below, you will find the code I am working with, and I am trying to set a variable by using a drop down list. I have tried everything I can think of, and I know this is simple. However, I am missing something. A nudge in the right direction would be appreciated. I keep getting an alert of "null" on the first two variables, but the third one comes through alright.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Homework 4 - Taxi Fare Calculator</title>
<script src="scripts.js"></script>
</head>
<body bgcolor="#f0ffff">
<h2>Taxi Fare Calculator by Christopher Lewis</h2>
This calculator will look at a starting zone, ending zone, and total time of a drive.
In the end, it calculates the fare.
<h3>Please Choose Starting Zone:</h3>
<select name="start">
<option value ="1">Zone 1</option>
<option value ="2">Zone 2</option>
<option value ="3">Zone 3</option>
</select>
<h3>Please Choose Destination Zone:</h3>
<select name="ending">
<option value = "1">Zone 1</option>
<option value = "2">Zone 2</option>
<option value = "3">Zone 3</option>
</select>
<h3>Please enter total time of ride:</h3>
<input type="text" id="totalTime" size="5">
<p>
<input type="button" id="button" value="Fare total" onclick="calculate()"
</body>
</html>
function calculate(){
var startZone = document.getElementById("start");
var endingZone = document.getElementById("ending");
var time = parseFloat(document.getElementById("totalTime").value);
alert(startZone);
alert(endingZone);
alert(time);
}
The reason why 'startZone' and 'endingZone' are returning 'null' is because you are querying a DOM element with IDs start and ending. There are no elements on the page with such IDs so document.getElementById returns null.
I edited your code. I added ID attribute to the <select> elements
<select name="start" id="start">
<option value ="1">Zone 1</option>
<option value ="2">Zone 2</option>
<option value ="3">Zone 3</option>
</select>
<select name="ending" id="ending">
<option value = "1">Zone 1</option>
<option value = "2">Zone 2</option>
<option value = "3">Zone 3</option>
</select>
Your selects have name instead of id set, so you won't find them with getElementById.
You can still get a return value from a "select" element, I made a simple JavaScript example to do this:
But you are trying to select the element by the id, which you are mistaking for the name attribute, in my example I left in the name attributes but added id attributes to select the element by Id via JavaScript
HTML
<select name="start" id="zone">
<option value ="1">Zone 1</option>
<option value ="2">Zone 2</option>
<option value ="3">Zone 3</option>
</select>
<br>The selected value is: <span id='return'>none</span>
JavaScript
document.getElementById("zone").onchange=function(){
document.getElementById("return").innerHTML=document.getElementById("zone").value;
}
Here is a JSFiddle example
First of all, you didn't set an id for the select elements. Secondly, you also need to get the selected value of a select box with javascript like this:
document.getElementById('select-id').options[document.getElementById('select-id').selectedIndex].text;
Here is the correct code:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Homework 4 - Taxi Fare Calculator</title>
<script src="scripts.js"></script>
</head>
<body bgcolor="#f0ffff">
<h2>Taxi Fare Calculator by Christopher Lewis</h2>
This calculator will look at a starting zone, ending zone, and total time of a drive.
In the end, it calculates the fare.
<h3>Please Choose Starting Zone:</h3>
<select id="start" name="start">
<option value ="1">Zone 1</option>
<option value ="2">Zone 2</option>
<option value ="3">Zone 3</option>
</select>
<h3>Please Choose Destination Zone:</h3>
<select id="ending" name="ending">
<option value = "1">Zone 1</option>
<option value = "2">Zone 2</option>
<option value = "3">Zone 3</option>
</select>
<h3>Please enter total time of ride:</h3>
<input type="text" id="totalTime" size="5">
<input type="button" id="button" value="Fare total" onclick="calculate()" />
</body></html>
Javascript
function calculate(){
var startZone = document.getElementById('start').options[document.getElementById('start').selectedIndex].text;
var endingZone = document.getElementById('ending').options[document.getElementById('ending').selectedIndex].text;
var time = parseFloat(document.getElementById("totalTime").value);
alert(startZone);
alert(endingZone);
alert(time);
}
demo: http://jsfiddle.net/zUa7S/1/
if you want to query element by name then this might work:
var startZone = document.getElementsByName("start")[0].value;
var endingZone = document.getElementsByName("ending")[0].value;
since getElementsByName returns collection whereas getElementById returns an object.
Related
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.
This question already has answers here:
How do I programatically select an HTML option using JavaScript?
(11 answers)
Closed 1 year ago.
The code below is for a dropdown in html:
<html>
<body>
<select id="demo1" name="demo2" type="text">
<option value="london">London</option>
<option value="paris">Paris</option>
<option value="tokyo">Tokyo</option>
</select>
</body>
</html>
How to make the option with value "paris" selected?
Please consider it is not possible to change anything in the code above.
The code was edited to give more details because unfortunately the answers did not work on this question.
The below code did not work as well:
<script>
var selectedtext = "paris";
document.getElementById("demo1").selected = selectedtext;
</script>
If you know what position the option you want selected will always be in, you can use either of the following approaches:
To modify the DOM object property of the option, set the .selectedIndex property (which starts counting from 0) on the element.
document.querySelector("select").selectedIndex = 1;
<html>
<body>
<!-- A select element can't have a type attribute -->
<select id="demo1" name="demo2" type="text">
<option value="london">London</option>
<option value="paris">Paris</option>
<option value="tokyo">Tokyo</option>
</select>
</body>
</html>
If you do want to alter the HTML state of the element, you can use the setAttribute() method on the element:
document.querySelector("select").options[1].setAttribute("selected", "selected");
// Just for demo purposes:
console.log(document.querySelector("select").outerHTML);
<html>
<body>
<!-- A select element can't have a type attribute -->
<select id="demo1" name="demo2" type="text">
<option value="london">London</option>
<option value="paris">Paris</option>
<option value="tokyo">Tokyo</option>
</select>
</body>
</html>
But, if you only know the text of the option that should be selected and not its position, then you can use the following CSS selector with .querySelector to isolate the right option and select it:
let input = "paris";
// Either one of these will work:
// To affect the HTML state:
document.querySelector("option[value='" + input + "']").setAttribute("selected", "selected");
// To affect the DOM Object property:
document.querySelector("option[value='" + input + "']").selected = true;
// Just for demo purposes:
console.log(document.querySelector("select").outerHTML);
<html>
<body>
<!-- A select element can't have a type attribute -->
<select id="demo1" name="demo2" type="text">
<option value="london">London</option>
<option value="paris">Paris</option>
<option value="tokyo">Tokyo</option>
</select>
</body>
</html>
You can do this in multiple ways:
if the options might change order you select the value itself
document.querySelector('[value=paris]').selected = true
<select>
<option value="london">London</option>
<option value="paris">Paris</option>
<option value="tokyo">Tokyo</option>
</select>
Otherwise you can use selectIndex:
document.querySelector('select').selectedIndex = 1
<select>
<option value="london">London</option>
<option value="paris">Paris</option>
<option value="tokyo">Tokyo</option>
</select>
this way....
document.querySelector('select').value = 'paris';
<select>
<option value="london">London</option>
<option value="paris">Paris</option>
<option value="tokyo">Tokyo</option>
</select>
Or, with full use in a form:
const myForm = document.forms['my-form']
myForm.city.value = 'paris'
<form name="my-form">
<select name="city">
<option value="london">London</option>
<option value="paris">Paris</option>
<option value="tokyo">Tokyo</option>
</select>
</form>
<!DOCTYPE html>
<html>
<body>
<form>
Select your favorite fruit:
<select id="mySelect">
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="pineapple">Pineapple</option>
<option value="banana">Banana</option>
</select>
</form>
<p>Click the button to change the selected fruit to banana.</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("mySelect").value = "banana";
}
</script>
</body>
</html>
This is from here setting value of select option on button click. When button is clicked the value will be banana when i change the value of banana with banana 1 it is not showing anymore.How to make it in a way that it will still accept the value even if there is a space
Also if you are checking for banana 1 there should be a value called banana 1 so it gets the value . Otherwise it will just give a blank dropdown as it cant find that value.
For checking for banana 1 you will have to change the function's checking value
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<body>
<script type="text/javascript">
$(document).ready(function(){
$("#make_ora").click(function () {
$("#mySelect").val("banana 1");
});
});
</script>
</head><body>
Select your favorite fruit:
<select id="mySelect" class ="mys">
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="pineapple">Pineapple</option>
<option value="banana 1">Banana 1</option>
</select>
<br/>
<br/>
<br/>
<input type='button' value='Change to banana 1' id='make_ora'>
</body>
</html>
Setting value of Selection tag will reflect only if any one of options value matches with set value. If you want to set value as "banana 1" it should have Banana.
Use This:-
var c=document.getElementById("mySelect");
c.value="banana 1";
alert(c.value);/* Only For Check*/
<script>
<option value="banana 1">Banana 1</option>
function myFunction() {
document.getElementById("mySelect").value = "banana 1";
}
</script>
First do above change in your w3schools editor
Then click on "See Result"
Then click on "Try it"
It should work
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="pineapple">Pineapple</option>
<option value="banana">Banana</option>
From among the option values there is no "banana1" in the select option value.so thats why it is not appearing .
instead of choose other option values like---orange (or)pineapple..
its working.
<form>
<SELECT NAME="sel" onChange="split(selected value)">
<OPTION VALUE=1>Milk</option>
<OPTION VALUE=2>tea</option>
<OPTION VALUE=3>water</option>
<OPTION VALUE=4>coffee</option>
</SELECT>
</form>
Hi i need to pass the selected value immediately on inside of this select tag so pls some one help me
Not that I agree with how you're doing things here (in side the tag), technically it is possible to do what you ask by the following:
<form>
<SELECT NAME="sel" onChange="split(this.value)">
<OPTION VALUE=1>Milk</option>
<OPTION VALUE=2>tea</option>
<OPTION VALUE=3>water</option>
<OPTION VALUE=4>coffee</option>
</SELECT>
</form>
You cannot pass the value directly to the handler but you can get the values in it, I'd recommend to do this in code and not use inline event handlers:
var select = document.forms[0].sel;
select.onchange = function(){
var value = select.options[select.selectedIndex].value; // to get Value
var text = select.options[select.selectedIndex].text; // to get Text
}
Here's a working example:
http://jsfiddle.net/c2SrV/
<html>
<head>
<script>
function split(value)
{
alert(value);
}
</script>
</head>
<body>
<form>
<SELECT NAME="sel" onChange="split(value)">
<OPTION VALUE=1>Milk</option>
<OPTION VALUE=2>tea</option>
<OPTION VALUE=3>water</option>
<OPTION VALUE=4>coffee</option>
</SELECT>
</form>
<body>
</html>
use "value". hope this was helpful
this.options[this.selectedIndex].value
*assuming you want to put it inline inside the onchange attribute
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>