We Keep Coding

How can i take value from input select type and use it in javascript?

So I have this project where I have to make a clothing store and I want to do the following:
I have this code in html:
<select class="sizeb" style="display: none;">
<option value="xxs">XXS</option>
<option value="xs">XS</option>
<option value="s">S</option>
<option value="m">M</option>
<option value="l">L</option>
<option value="xl">XL</option>
<option value="xxl">XXL</option>
</select>
and with JavaScript I want to take the option value, check it's value and create a var price; then check and set a price:
var x = <somehow to get the value>;
if (x == 'xxs')
price = 5;
else if(x == 'xs')
price = 10;
and display it later this way:
document.getElementById("PriceTag").innerHTML = "Pret: " + price + " RON";
Any help is appreciated.

First, you just get a reference to the HTML element and assign that to a variable:
var select = document.querySelector(".sizeb");
Then you get the value:
var val = select.value;
Then you do your logic and calculations:
var x = <somehow to get the value>;
if (x == 'xxs'){
price = 5;
} else if(x == 'xs') {
price = 10;
}
And, then display the result:
document.getElementById("PriceTag").innerHTML = "Pret: " + price + " RON";
NOTE: You have your select to be hidden initially. If that's the case, no one will ever be able to select a value from it.
Now, you also have to decide "when" you want all this to be done. That could be when the value in the select changes. BUt, if that's the case, you should add a first option of something like --- Select One ---, because if the user wants the first selection, they won't do anything, which won't trigger the change event. So, putting it all together, we get:
// Get a reference to the select
var select = document.querySelector(".sizeb");
// Set up an event handler that runs when the value in the select changes:
select.addEventListener("change", function(){
// Then you get the value:
var x = select.value;
var price = null;
// Then you do your logic and calculations.
// And if will work, but for this a switch is better
switch (x) {
case 'xxs' :
price = 5;
break;
case 'xs' :
price = 10;
break;
case 's' :
price = 15;
break;
case 'm' :
price = 20;
break;
case 'l' :
price = 25;
break;
case 'xl' :
price = 30;
break;
case 'xxl' :
price = 35;
break;
}
document.getElementById("PriceTag").innerHTML = "Pret: " + price + " RON";
});
<select class="sizeb">
<option value="">--- Select One ---</option>
<option value="xxs">XXS</option>
<option value="xs">XS</option>
<option value="s">S</option>
<option value="m">M</option>
<option value="l">L</option>
<option value="xl">XL</option>
<option value="xxl">XXL</option>
</select>
<div id="PriceTag"></div>

You can:
1-Add an listener to the select like this
<select onchange="someFunction(this)" class="sizeb" style="display: none;>
2-create a function like this:
function someFunction(element){
va price = element.value;
document.getElementById("PriceTag").innerHTML = "Pret: " + price + " RON";
}

Next Line Javascript

What in my code is causing the code printed to be on the next line?
function GetSelected (selectTag) {
var selIndexes = "";
for (var i = 0; i < selectTag.options.length; i++) {
var optionTag = selectTag.options[i];
if (optionTag.selected) {
if (selIndexes.length > 0)
selIndexes += "";
selIndexes = optionTag.value;
}
}
var info = document.getElementById ("info");
if (selIndexes.length > 0) {
info.innerHTML = selIndexes;
}
else {
info.innerHTML = "There is no selected option";
}
}
Here's one of the option in the combobox:
<select option="single" name= "viocat" id="viocat" onchange="GetSelected (this);" class = "form-control">
<option>Choose category ...</option>
<option value="<?php
$con = mysqli_connect("///") or die (mysql_error());
$sql = mysqli_query ($con, "SELECT violationcategory, MAX(code) AS highest_id FROM tbl_violation where violationcategory = '\r\n DL'");
$sql = "SELECT violationcategory, MAX(code) AS highest_id FROM tbl_violation where violationcategory = '\r\n OR'";
$result = mysql_query ($sql,$con);
while($row = mysql_fetch_array($result)){
$i = $row['highest_id'];
$i++;
echo "OR - " .$i;
}
?> "> Driver's License Related</option>
</select>
Here's where to be displayed:
<label type= "text" id="info" name="viocode" class = "form-control">

I'm not quite sure exactly what you mean by next line but, from part of the question that you deleted, I think it is because you start your PHP block on a new line.
Instead of:
<option>Choose category ...</option>
<option value="
<?php
Try:
<option>Choose category ...</option>
<option value="<?php

I want to have a dropdown menu where you choose the number instead of the variable

the "var aantal = 10" gives me 10 traingles but I would like the user to insert their own amount of triangles.
var aantal = 10;
var triangle = [];
for (var i = 0; i < aantal; i++){
triangle[i] = new Triangle;
triangle[i].xLeft = 20 + 30*i;
triangle[i].yLeft = 20 + 20*i;
}

A quick and easy way to ask for user input in a browser is via the Window.prompt method.
This stops your code until the user presses "OK" or "Cancel" in a popup window. When the user fills in a value and presses "OK", the value is returned as a string. Here's an example:
var userInput = prompt("How many triangles do you want?", 10);
var count = parseInt(userInput, 10);
for (var i = 0; i < count; i += 1) {
console.log("Triangle " + i);
}
Note that you need to explicitly convert the string to a number. Additionally, you might want to check for null or NaN: when a user presses "Cancel" or fills in invalid data, you'll need to have a fallback.
Once this works, you might want to try to create an <input type="number"> HTML element and get your data from there.

I think Bas is asking for a html drop down list that triggers a function, something like this:
<!-- /JavaScript code-->
<script>
function setTriangles(value) {
var aantal = eval(value);//evaluate the input as it's coming as a string
if (aantal == 0) { //do nothing if the user has picked the description "Select number of triangles" in the drop down
return;
}
var triangle = [];
for (var i = 0; i < aantal; i++) {
triangle[i] = new Triangle;
triangle[i].xLeft = 20 + 30 * i;
triangle[i].yLeft = 20 + 20 * i;
}
}
</script>
<!-- /end of JavaScript code-->
<!-- /HTML code-->
<select id="input" onChange="setTriangles(this.value);">
<option value="0">Select number of triangles</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
</select>
<!-- /end of HTML code-->

How to create a select that depends on the value of another select?

I need to create a menu of regions hat display two lists: a <select> for the region and another <select> for the available municipalities of that region. For this, I have a <form> and I update the municipalities through JavaScript. I have problems assigning the municipalities as <option>s of the second <select>. The option matrix of the menu doesn't accept the assignment of the values.
Here's the code.
HTML.
<html>
<head>
<title>
Página menú principal.
</title>
<?!= incluirArchivo('ArchivoJS'); ?>
</head>
<body onLoad = "preparar();">
<form id="formularioConductor" name="formularioConductor" method="post" enctype="multipart/form-data" autocomplete = "on">
<select name="menuDepartamento" id="menuDepartamento" tabindex="2" accesskey="e" onChange="municipiosDepartamento();">
<option value="x" selected="selected">ELIJA UN DEPARTAMENTO</option>
<option value="0">Antioquia</option>
<option value="1">Atlántico</option>
</select>
<select name="menuMunicipios" id="menuMunicipios" tabindex="3" disabled>
<option value=0>TODOS LOS MUNICIPIOS</option>
</select>
</form>
</body>
</html>
Javascript code:
<script lenguage="javascript">
function preparar() {
document.forms[0].elements.numeroLicencia.focus();
document.forms[0].elements.nombreConductor.disabled = true;
document.forms[0].elements.botonEnviar.disabled = true;
document.forms[0].elements.botonActualizar.disabled = true;
}
function municipiosDepartamento() {
var arregloMunicipiosDepartamento = new Array();
var posicionMunicipio = document.forms[0].elements.menuDepartamento.value;
arregloMunicipiosDepartamento = municipiosColombia(posicionMunicipio);
if(document.forms[0].elements.menuMunicipios.options.length > 1){
var totalMunicipios = document.forms[0].elements.menuMunicipios.length;
for (var i = 1; i < totalMunicipios; i ++){
document.forms[0].elements.menuMunicipios.options[1] = null;
}
}
if(document.forms[0].elements.menuDepartamento.value === "x"){
document.forms[0].elements.menuMunicipios.selectedItem = 0;
document.forms[0].elements.menuMunicipios.disabled = true;
}
else
{
document.forms[0].elements.menuMunicipios.options.length = arregloMunicipiosDepartamento.length;
for (var i = 0; i < arregloMunicipiosDepartamento.length; i ++) {
var opcionTemporal = new Option(arregloMunicipiosDepartamento[i], (i+1));
***document.forms[0].elements.menuMunicipios.options[i+1].text = opcionTemporal.text;
document.forms[0].elements.menuMunicipios.options[i+1].value = opcionTemporal.value;***
}
document.forms[0].elements.menuMunicipios.disabled = false;
}
}
function municipiosColombia(posicion) {
var antioquia, atlantico, arregloTodos, arregloMunicipiosDepartamento = new Array();
antioquia=["Medellín","Abejorral","Abriaqui","Alejandria"];
atlantico = ["Barranquilla","Baranoa","Campo De La Cruz","Candelaria"];
arregloTodos = [antioquia, atlantico];
arregloMunicipiosDepartamento=arregloTodos[posicion];
return arregloMunicipiosDepartamento;
}
</script>
I have highlighted the work that doesn't work.

The way I would do what you describe is to clear out the options each time and recreate the required ones, then add them into the particular select, like so:
var regions = {};
regions['A'] = ['mu', 'ni', 'ci', 'pal', 'it', 'y'];
regions['B'] = ['I', 'like', 'bananas'];
var selRegion = document.getElementById('region');
selRegion.onchange = setMunicipalities;
var selMun = document.getElementById('municipality');
function setMunicipalities(e)
{
while(selMun.length > 0)
{
selMun.remove(0);
}
if(selRegion.selectedOptions[0].value === 'ALL')
{
for(var r in regions)
{
if(regions.hasOwnProperty(r))
{
addMunicipalities(regions[r]);
}
}
}
else
{
var reg = selRegion.selectedOptions[0].value;
addMunicipalities(regions[reg]);
}
}
function addMunicipalities(region)
{
var allMun = document.createElement('option');
allMun.setAttribute('value', 'ALL');
var allMunText = document.createTextNode('ALL');
allMun.appendChild(allMunText);
selMun.add(allMun);
for (var mi = 0; mi < region.length; mi++)
{
var m = region[mi];
var mun = document.createElement('option');
mun.setAttribute('value', m);
var munText = document.createTextNode(m);
mun.appendChild(munText);
selMun.add(mun);
}
}
setMunicipalities(null);
<label for="region">Region</label>
<select id="region">
<option selected="selected" value="ALL">ALL</option>
<option value="A">A</option>
<option value="B">B</option>
</select>
<label for="municipality">Municipality</label>
<select id="municipality">
</select>

I haven't read your entire code because I had a hard time reading code with contents not in English but anyway, I get what you're trying to do here. Suppose that your first select list contains "Region A" and "Region B" as options; "Municipality A1", "Municipality A2", "Municipality B1","Municipality B2" are the possible options for the second select list. Here's a function that will change the options of the second select list depending on what is selected on the first select list:
function optionChanger(v_selected){
var whatisselected= v_selected.options[v_selected.selectedIndex].value;
var municipalities= {};
municipalities['A'] = ['Municipality A1','Municipality A2'];
municipalities['B'] = ['Municipality B1','Municipality B2'];
v_selected.options.length=0; //remove the contents of the second select list
v_selected.options[0] = new Option(municipalities[whatisselected][0],municipalities[whatisselected][0],false,true);// set the first option of the second list as the default selected value
for(x=1;x<municipalities[whatisselected].length;x++){ //add the remaining options to the second list
v_selected.options[x] = new Option(municipalities[whatisselected][x],municipalities[whatisselected][x],false,false);
}
}
Then add this inside the tag of your FIRST select list:
onchange='optionChanger(this)'
PS: Please notice that the return value of the first select list must be 'A', 'B'

Show Current Database Value as Default in Dropdown

I have a dropdown that a selection produces another dropdown with values. All of this writes to the database correctly. I can't figure out how to show the current database value (ie the last value submitted) to show up in the 'second' drop down ('first' dropdown works fine in recalling the database information). So when I select 'Masking Available' I would like that to show up when I open the webpage next time.
function configureDropDownLists(main, second) {
var masking1e = new Array('', 'Masking Available');
var permissivemode1e = new Array('', 'Permissive Mode Enabled');
switch (main.value) {
case 'Masking':
document.getElementById(second).options.length = 0;
for (i = 0; i < masking1e.length; i++) {
createOption(document.getElementById(second), masking1e[i], masking1e[i]);
}
break;
case 'Permissive Mode':
document.getElementById(second).options.length = 0;
for (i = 0; i < permissivemode1e.length; i++) {
createOption(document.getElementById(second), permissivemode1e[i], permissivemode1e[i]);
}
break;
default:
document.getElementById(second).options.length = 0;
break;
}
}
function createOption(first, text, value) {
var opt = document.createElement('option');
opt.value = value;
opt.text = text;
first.options.add(opt);
}
<select name="first" id="first" onchange="configureDropDownLists(this,'second')">
<option value="">Please Select Accommodation</option>
<option value="Masking" <?php if ($first== "Masking"){ echo "SELECTED"; } ?>>Masking</option>
<option value="Permissive Mode" <?php if ($first== "Permissive Mode"){ echo "SELECTED"; } ?>>Permissive Mode</option>
</select>
</br>
<select name="second" id="second">
</select>