We Keep Coding

How to add value to select tag from input field?

How to add value to select tag from input field?
When I text something to input field that named add_val
and click the button, it will add the value to select tag option.
<form>
<select id="mySelect" size="8">
<option>Apple</option>
<option>Pear</option>
<option>Banana</option>
<option>Orange</option>
</select>
</form>
<br>
<input type="text" id="add_val" name="add_val">
<button type="button" onclick="myFunction()">Insert option</button>
<script>
function myFunction() {
var addvar = document.getElementById("add_val").value;
var x = document.getElementById("mySelect");
var option = document.createElement("option");
x.add(addvar);
}
</script>
But finally, it doesn't work, anyidea, thank you very much

You need to use appendChild Js function and also assign a value and innerHTML to your newly option created option.
You can either use .text .textContent to you new option as well.
Run snippet below to see it working.
function myFunction() {
var addvar = document.getElementById("add_val").value;
var select = document.getElementById("mySelect")
var x = document.getElementById("mySelect");
var option = document.createElement("option");
option.value = addvar;
option.textContent = addvar;
select.appendChild(option);
//Clear Input
document.getElementById("add_val").value = '';
}
<form>
<select id="mySelect" size="8">
<option>Apple</option>
<option>Pear</option>
<option>Banana</option>
<option>Orange</option>
</select>
</form>
<input type="text" id="add_val" name="add_val">
<button type="button" onclick="myFunction()">Insert option</button>

what you are doing is wrong, so the correct code is:
function myFunction() {
var select = document.getElementById('mySelect');
var option = document.createElement('option')
// get the value from the input
var text = document.getElementById('add_val').value;
// create text node for option element
option.appendChild(document.createTextNode(text));
// set option value
option.value = text;
// add option to select
select.appendChild(option);
}
<form>
<select id="mySelect" size="8">
<option>Apple</option>
<option>Pear</option>
<option>Banana</option>
<option>Orange</option>
</select>
</form>
<br>
<input type="text" id="add_val" name="add_val">
<button type="button" onclick="myFunction()">Insert option</button>

Can be done with less lines;
function myFunction() {
var x = document.getElementById("mySelect");
var option = document.createElement("option");
option.text = document.getElementById("add_val").value;
x.add(option);
}

Use .insertAdjacentHTML() with string interpolation to make it short and easy.
function myFunction() {
var addvar = document.getElementById("add_val").value;
document.getElementById("mySelect")
.insertAdjacentHTML("beforeend", `<option>${addvar}</option>`);
}
<form>
<select id="mySelect" size="8">
<option>Apple</option>
<option>Pear</option>
<option>Banana</option>
<option>Orange</option>
</select>
</form>
<br>
<input type="text" id="add_val" name="add_val">
<button type="button" onclick="myFunction()">Insert option</button>
but if you want to create the DOM element directly, I'd do it like this:
function myFunction() {
document.getElementById("mySelect")
.appendChild(document.createElement("option"))
.text = document.getElementById("add_val").value;
}
<form>
<select id="mySelect" size="8">
<option>Apple</option>
<option>Pear</option>
<option>Banana</option>
<option>Orange</option>
</select>
</form>
<br>
<input type="text" id="add_val" name="add_val">
<button type="button" onclick="myFunction()">Insert option</button>

This does has a function that does it onkeyup and and onclick. I used the appendChild function.
function myFunction1() {
var val = $("#add_val1").val();
var select = document.getElementById("mySelect");
var option = document.createElement("option");
option.value = val;
option.textContent = val;
select.appendChild(option);
}
function myFunction2() {
var val = $("#add_val1").val();
var select = document.getElementById("mySelect");
var option = document.createElement("option");
option.value = val;
option.textContent = val;
select.appendChild(option);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<select id="mySelect" size="8">
<option>Apple</option>
<option>Pear</option>
<option>Banana</option>
<option>Orange</option>
</select>
</form>
<br>
<h5>To Add Value Onkeyup</h5>
<input type="text" id="add_val1" name="add_val1" onkeyup="myFunction1()">
<h5>To Add Value When Button Is Clicked</h5>
<input type="text" id="add_val2" name="add_val2">
<button onclick="myFunction2()">Insert Option</button>

How to validate the select method with submit type?

I want to validate the select method with submit type button. I have created a form and under that, I have created the select method and given some options. By submit type, the onClick should validate my submit type with the options in the select method. How can I assign the value of option
to var t based on select?
According to the select option my var t should be changed.
If the value is volvo then it should print val11, similarly Saab= val14, opel= val82, Audi= val34
<select name="carlist" class="temp>
<option value="10">Volvo</option>
<option value="20">Saab</option>
<option value="30">Opel</option>
<option value="45">Audi</option>
</select>
<input type="submit" class="temp" value="submit the answer">
<script>
var t;
if () {
t=value;
} else if () {
t=value;
} else if () {
t=value;
}else {
t=value;
}
</script>

You can call a function on clicking the button. Inside the function get the text of the selected option:
function getValue(){
var el = document.querySelector('.temp');
var val = el.options[el.selectedIndex].text;
var t;
if(val == "Volvo")
t = 'val11';
else if(val == "Saab")
t = 'val14';
if(val == "Opel")
t = 'val82';
else if(val == "Audi")
t = 'val34';
alert(t);
}
<form>
<select name="carlist" class="temp">
<option value="10">Volvo</option>
<option value="20">Saab</option>
<option value="30">Opel</option>
<option value="45">Audi</option>
</select>
<input onclick="getValue()" type="submit" class="temp" value="submit the answer">
</form>
You can also think of using data attribute which is more cleaner and simpler:
function getValue(){
var el = document.querySelector('.temp');
var t = el.options[el.selectedIndex].getAttribute('data-val');
alert(t);
}
<form>
<select name="carlist" class="temp">
<option value="10" data-val="val11">Volvo</option>
<option value="20" data-val="val14">Saab</option>
<option value="30" data-val="val82">Opel</option>
<option value="45" data-val="val34">Audi</option>
</select>
<input onclick="getValue()" type="submit" class="temp" value="submit the answer">
</form>

You can do a few things, here's the simplest I could get away with.
function submitForm() {
const value = document.querySelector('[name="carlist"').value;
console.log(value);
return false; // to prevent it navigating away.
}
<form onsubmit="submitForm()">
<select name="carlist" class="temp">
<option value="1">Volvo</option>
<option value="2">Saab</option>
<option value="3">Opel</option>
<option value="4">Audi</option>
</select>
<input type="submit" class="temp" value="submit the answer">
You can also have some validation running earlier, e.g. on change:
/**
* This function runs on form submit.
*/
function submitForm(event) {
const value = document.querySelector('[name="carlist"').value;
console.log(value);
// to prevent it navigating away.
event.preventDefault();
return false;
}
/**
* This function runs on selection change
*/
function validateCar(changeEvent) {
console.log('Change');
// do something with changeEvent
}
<form onsubmit="submitForm(event)">
<select name="carlist" class="temp" onchange="validateCar(event)">
<option value="1">Volvo</option>
<option value="2">Saab</option>
<option value="3">Opel</option>
<option value="4">Audi</option>
</select>
<input type="submit" class="temp" value="submit the answer">

You can set an id attribute on the select element and then access it through a querySelector or getElementById.
<form id="carForm">
<select name="carlist" class="temp" id="car">
<option value="val11">Volvo</option>
<option value="val14">Saab</option>
<option value="val82">Opel</option>
<option value="val34">Audi</option>
</select>
</form>
let carForm = document.getElementById('carForm');
carForm.onsubmit = function(event) {
var t = document.getElementById('car');
...
}
See codepen example

Add removed select options

Currently I have a function I created that removes some options from a select menu based on a value passed from another select. I want to revert back to normal each time the function is called (add all the original options back)
HTML
<select id="Current-Tier" onchange="removetier();" class="form-control boosting-select">
<option value="100">Bronze</option>
<option value="200">Silver</option>
<option value="300">Gold</option>
<option value="400">Platinum</option>
<option value="500">Diamond</option>
</select>
<select id="Desired-Tier" class="form-control boosting-select">
<option value="100">Bronze</option>
<option value="200">Silver</option>
<option value="300">Gold</option>
<option value="400">Platinum</option>
<option value="500">Diamond</option>
</select>
JS
function removetier(){
var currentTierValue = document.getElementById("Current-Tier");
var current = currentTierValue.options[currentTierValue.selectedIndex].value;
var desiredDivisionValue = document.getElementById("Desired-Tier");
for(var i=0;i<desiredDivisionValue.length;i++){
if(desiredDivisionValue[i].value < current){
desiredDivisionValue.remove(desiredDivisionValue[i]);
}
}
Update_Desired_Rank_image();
}

Have you considered adding the hidden attribute rather than deleting them?
Then the next time you receive a request, you can go through the list programmatically and remove the hidden attribute from each option.
An example of the hidden label, BTW, is
<select id="Desired-Tier" class="form-control boosting-select">
<option value="100">Bronze</option>
<option value="200">Silver</option>
<option value="300">Gold</option>
<option value="400">Platinum</option>
<option value="500" hidden>Diamond</option>
</select>
If you run it you will see that Diamond is hidden. This way you always have access to all your options.

You can easily iterate over the select input and either store the removed items in an array or leverage the hidden attribute on the option tag:
Fiddle: https://jsfiddle.net/gLwwmh82/2/
HTML
<select id="mySelect">
<option value="">Select...</option>
<option value="test1">Test1</option>
<option value="test2">Test2</option>
<option value="test3">Test3</option>
<option value="test4">Test4</option>
<option value="test5">Test5</option>
<option value="test6">Test6</option>
</select>
<button id="btnRemove" onclick="remove()">Remove Half of Entries</button>
<button id="btnReset" onclick="reset()">Reset</button>
JS
function reset() {
var select = document.getElementById('mySelect');
var options = select.querySelectorAll('option');
for (var i = 0; i < options.length; i++) {
options[i].removeAttribute('hidden');
}
}
function remove() {
var select = document.getElementById('mySelect');
select.value = "";
var entries = select.querySelectorAll('option');
for (var i = 1; i < 5; i++) {
// Wrap the below line in your logic to know what to delete/not to delete
entries[i].setAttribute('hidden', true);
}
}

Pass dropdown values to text box with javascript

I don't know much about javascript and unfortunately don't have time to learn before this project is due (wish I did!). I assume it is possible to pass the value of a drop-down selection into a hidden text input field on a form before the form is submitted. Could anyone help me figure out how to do that with javascript? Thank you! Here are my drop-down and text box details:
<div class="formEntryArea">
<div class="formEntryLabel">
<span class="formLabel"><label for=" langdropdown">Would you like to receive library notices in English or Spanish? ><span class="formRequired">*</span></label></span>
</div>
<div class="formMultiSelect" id=”langdropdown”>
<select name=" langdropdown ">
<option value="0" selected="selected">Choose language</option>
<option value="eng">English</option>
<option value="spa">Spanish</option>
<input type="text" id="ddepartment" name="ddepartment" value=””>
</select>
</div>

This is simply. First of all, you have to bind a change event handler for your select. Then, you have to set input text with value selected from dropdown.
var select=document.getElementsByTagName('select')[0];
var input=document.getElementById('ddepartment');
select.onchange=function(){
input.value=select.options[select.selectedIndex].text;
}
<div class="formEntryArea">
<div class="formEntryLabel">
<span class="formLabel"><label for=" langdropdown">Would you like to receive library notices in English or Spanish? ><span class="formRequired">*</span></label></span>
</div>
<div class="formMultiSelect" id=”langdropdown”>
<select name=" langdropdown ">
<option value="0" selected="selected">Choose language</option>
<option value="eng">English</option>
<option value="spa">Spanish</option>
</select>
<input type="text" id="ddepartment" name="ddepartment">
</div>

You can use this code:
var myselect = document.getElementById("MySelect");
myselect.onchange = function(){
alert(myselect.options[myselect.selectedIndex].value);
document.getElementById("ddepartment").value = myselect.options[myselect.selectedIndex].value;
};
Result: https://jsfiddle.net/fh5myefw/

Mind to close the tags, it's better practice.
var select = document.getElementById('selectElem');
var outputElem = document.getElementById('ddepartment');
select.addEventListener('change',function(){
var newValue = !this.selectedIndex ? "":this.options[this.selectedIndex].text;
outputElem.value = newValue;
});
<select name="langdropdown" id="selectElem" required>
<option value="" selected="selected">Choose language</option>
<option value="eng">English</option>
<option value="spa">Spanish</option>
</select>
<input type="text" id="ddepartment" name="ddepartment" value="">

this is javascript function
function func(selectObject)
{
document.getElementById('ddepartment').value = selectObject.value;
}
add onchange event to select element like this
<select name="langdropdown" onchange="func(this)">

Here use this:
var sel = document.getElementById('lang');
sel.onchange = function() {
var val = this.options[this.selectedIndex].value;
var che = document.getElementById('cache').value;
che = val;
console.log(che);
}
SNIPPET
var sel = document.getElementById('lang');
sel.onchange = function() {
var val = this.options[this.selectedIndex].value;
var che = document.getElementById('cache').value;
che = val;
console.log(che);
}
<select id='lang' name="lang">
<option value="" selected>Choose language</option>
<option value="eng">English</option>
<option value="spa">Spanish</option>
<option value="jpn">Japanese</option>
<option value="zho">Chinese</option>
<option value="fin">Finnish</option>
<option value="nav">Navajo</option>
</select>
<input type="hidden" id="cache" name="cache" value=””>

Set different option selected option on refresh of the page -- JAVASCRIPT

so i have a table as follows:
<select id="CellLayout" style="color:#99FF00; font-family:monospace;" onChange="PipeConfigChange(this.value);">
<option>select layout</option>
<option>blinker</option>
<option>glider</option>
<option>flower</option>
<option>custom</option>
</select>
on default, 'select layout' is what is displayed. on the click of a button, i need the select box to display 'custom'. i tried searching around SO, but I'm trying to do this without Jquery..

Try this... Its simple... Really Works..
<script type="text/javascript">
function fun()
{
document.getElementById("CellLayout").selectedIndex = 4;
}
</script>
<form name="f1">
<select id="CellLayout" style="color:#99FF00; font-family:monospace;" >
<option>select layout</option>
<option>blinker</option>
<option>glider</option>
<option>flower</option>
<option>custom</option>
</select>
<input type="button" onclick="fun()"/>
</form>

You can just change the selects value, like so :
<select id="CellLayout" style="color:#99FF00; font-family:monospace;" onChange="PipeConfigChange(this.value);">
<option>select layout</option>
<option>blinker</option>
<option>glider</option>
<option>flower</option>
<option>custom</option>
</select>
<input type="button" value="change" onclick="change()" />
<script type="text/javascript">
function change() {
document.getElementById('CellLayout').value = 'custom';
}
</script>
FIDDLE

You can try it:
<select id="CellLayout" style="color:#000; font-family:monospace;" onChange="PipeConfigChange(this.value);">
<option value="0">select layout</option>
<option value="1">blinker</option>
<option value="2">glider</option>
<option value="3">flower</option>
<option value="4">custom</option>
</select>
<input id="btn" type="submit" value="setSelected">
<script type="text/javascript">
var btn = document.getElementById('btn');
btn.onclick = function(){
var layOut = document.getElementById('CellLayout');
for(var i = 0; i < layOut.length; i++){
if(layOut.options[i].value == '4'){
layOut.selectedIndex = i;
}
}
}
</script>

According to my understand of your question. May be following is your answer. Please check.
In html:
<select id="CellLayout" style="color:#99FF00; font-family:monospace;" onChange="PipeConfigChange(this.value);">
<option>select layout</option>
<option>blinker</option>
<option>glider</option>
<option>flower</option>
<option>custom</option>
</select>
<input type="button" value="clickHere" onclick="javascript:call()"/>
In javascript:
function call() {
var textToFind = 'custom';
var dd = document.getElementById('CellLayout');
for (var i = 0; i < dd.options.length; i++) {
if (dd.options[i].text === textToFind) {
dd.selectedIndex = i;
break;
}
}
}