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>
<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>
In my drop-down list, I have selection 1(A) and selection 2(B). If I select A from the drop-down list, I want to see a name, Janifer. If I select B, I want to see another name, David.
var mylist = document.getElementById("mylist");
if (mylist.value == "1") {
document.getElementById('myalllist').getElementsByTagName('option')[1].selected = 'selected';
}
if (mylist.value == "2") {
document.getElementById('myalllist').getElementsByTagName('option')[2].selected = 'selected';
}
HTML:
<select id="mylist" onchange="fndropoption()">
<option>Select</option>
<option>1</option>
<option>2</option>
</select>
<select id="myalllist" onchange="fndropoption()">
<option value="1">xxxxxxxx</option>
<option value="2">yyyyyyyy</option>
</select>
I couldn't get it to work with onChange attribute either. This works:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
window.onload = function() {
var foo=document.getElementById("mylist");
foo.onchange=function() {
if(foo.options.selectedIndex != 0) {
document.getElementById("myalllist").options.selectedIndex = foo.options.selectedIndex-1;
}
}
}
</script>
</head>
<body>
<select id="mylist">
<option value="0" selected="selected">Select</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<select id="myalllist" onChange="">
<option value="1">xxxxxxxx</option>
<option value="2">yyyyyyyy</option>
</select>
</body>
</html>
try this - the onchange should be on the first dropdown list - to trigger the change for the second list. Seems to work, eg: selecting 3 in the first list causes the selection of 3 in the second list.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<select id="list1" onChange="changeList()">
<option value="0" selected="selected">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="list2" >
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<script>
function changeList()
{
var selectedOption=document.getElementById("list1").options.selectedIndex;
document.getElementById("list2").options.selectedIndex = selectedOption;
var selectedOption2=document.getElementById("list2").options.selectedIndex;
console.log(selectedOption2)
}
</script>
</body>
</html>
Blockquote
Hi i have this problem:
My HTML page is working fine without form, but when i put the form, than i can't select on the 1/2 finle and in finle.
See my code.
How can i solve this probleem?
Blockquote
<html>
<body bgcolor=#0B4C5F>
<head>
<script type="text/javascript">
function groupA(val) {
var x = document.getElementById("groupAB");
x.options[1].value = val;
x.options[1].text = val;
}
function groupAB(val) {
var x = document.getElementById("groupABCD");
x.options[1].value = val;
x.options[1].text = val;
}
function groupABCD(val) {
var x = document.getElementById("groupABCDEFGH");
x.options[1].value = val;
x.options[1].text = val;
}
</script>
</head>
<!--=========================================================-->
<form action="insert.php" method="post">
<!-------------------------------------------------------------------------->
<select name="Achtstelfinale1" onchange="groupA(this.value)">
<option value="Select">1e GROUP A</option>
<option value="Brazil">Brazil</option>
<option value="Mexico">Mexico</option>
<option value="Croatia">Croatia</option>
<option value="Cameroon">Cameroon</option>
</select>
<p></p>
<select name="1/4 Finale 1" id="groupAB" onchange="groupAB(this.value)">
<option value="Select">1/4 Finale 1</option>
<option value="">?</option>
<option value="">?</option>
</select>
<p></p>
<select name="1/2 Finale" id="groupABCD" onchange="groupABCD(this.value)">
<option value="Select">1/2 FINALE 1</option>
<option value="">?</option>
<option value="">?</option>
</select>
<p></p>
<select name="Finale" id="groupABCDEFGH" onchange="groupABCDEFGH(this.value)">
<option value="Select">FINALE 1</option>
<option value="">?</option>
<option value="">?</option>
</select>
<!----------------->
</form>
<!----------------->
</body>
</html>
you can try and change the html tags. it should look like this:
<html>
<head>`
#Here goes the Head section(title,links, meta tags and all that stuff)
</head>
<body>
#Here goes the body section
</body>
</html>
Hope it was helpfull...
if you have more questions just ask and the stack community will be glad to help you out
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>