We Keep Coding

How do I set condition for select option in html form [duplicate]

This question already has answers here:
how to change a selections options based on another select option selected?
(9 answers)
Closed 1 year ago.
I want to have a form that has car manufacturers and car models I will have two select inputs one will have the manufacturer options based on the selected manufacturer the second select input should have only car models from that manufacturer. Now, I am trying to make someone do the work for me coz sincerely I am new to this. I will appreciate suggestions, directions even articles on how t achieve this.
<p>Manufacturer <br>
<select>
<option value="Toyota"> Toyota</option>
<option value="Nissan"> Nissan</option>
</select></p>
<p>Make <br>
<select>
<option ></option>
</select></p>
<!-- if a user should choose Toyota I want the second selection to display Toyota makes in the option like MarkX, Avensis but if they choose Nissan the options should be bluebird, Murano, Tiida like that-->

You can store the options if the user selects "Toyota" and the options if the user selects "Nissan" in an array, then attach a change event listener to the select that checks its value.
If the value is "Toyota", iterate through the "Toyota" array and append an option with the value and content set to the item. Otherwise, loop through the "Nissan" array.
const toyotaOptions = ['MarkX', 'Avensis'];
const nissanOptions = ['bluebird', 'Murano', 'Tiida'];
function updateCarByBrand() {
carselect.innerHTML = "";
if (brandselect.value == "Toyota") {
toyotaOptions.forEach(e => carselect.innerHTML += `<option value=${e}">${e}</option>`)
} else {
nissanOptions.forEach(e => carselect.innerHTML += `<option value=${e}">${e}</option>`)
}
}
brandselect.addEventListener('change', updateCarByBrand);
updateCarByBrand();
<p>Manufacturer <br>
<select id="brandselect">
<option value="Toyota"> Toyota</option>
<option value="Nissan"> Nissan</option>
</select>
</p>
<p>Make <br>
<select id="carselect">
</select>
</p>
Or a more customizable and scalable solution:
const options = {
'Toyota': {
cars: ['MarkX', 'Avensis']
},
'Nissan': {
cars: ['bluebird', 'Murano', 'Tiida']
}
}
function updateCarByBrand() {
carselect.innerHTML = "";
options[brandselect.value].cars.forEach(e => carselect.innerHTML += `<option value=${e}">${e}</option>`)
}
brandselect.addEventListener('change', updateCarByBrand);
updateCarByBrand();
<p>Manufacturer <br>
<select id="brandselect">
<option value="Toyota"> Toyota</option>
<option value="Nissan"> Nissan</option>
</select>
</p>
<p>Make <br>
<select id="carselect">
</select>
</p>

A jQuery approach:
let options = [
["MarkX", "Avensis"],
["bluebird", "Murano", "Tiida"]
];
$(document).ready(function () {
$("#type").change(function () {
$("#model").empty();
$.each(options[$(this).prop("selectedIndex")], function (key, value) {
$("#model").append($("<option></option>").attr("value", value).text(value));
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="type">
<option value="Toyota" selected> Toyota</option>
<option value="Nissan"> Nissan</option>
</select>
<select id="model">
<option value="" ><option value='Toyota' selected>MarkX</option><option value='Toyota'>Avensis</option></option>
</select>

How to get the OPTION's TEXT value

In this case, only primary dropdown will change, other dropdowns' values will change automatically according to it (so users wont be changing them) I'm trying to get the Option's TEXT value using PHP with $_POST. But i can only get it when i manually changed the other dropdown .
I have tried to use the trigger() method, but it fails to get the option text value. Any idea why the code fails to work. Thank you.
function setDropDown() {
var index_name =
document.getElementsByName('ForceSelection')[0].selectedIndex;
var others = document.querySelectorAll('.secondary');
for (var i = 0; i < others.length; i++) {
others[i].selectedIndex = index_name;
}
}
<!-- try to get the option text value and pass it to input field-->
<!-- Then in the php code use $_POST[] to retrieve the input value-->
function setTextField(ddl) {
document.getElementById('make_text').value = ddl.options[ddl.selectedIndex].text;
}
$("select").trigger("change");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post">
<div><b>Primary dropdown:</b>
<select name="ForceSelection" id="ForceSelection" onChange="javascript:return setDropDown();">
<option value="" selected>Select</option>
<option value="treatmentid1">treatmentname1</option>
<option value="treatmentid2">treatmentname2</option>
</select>
</div>
<div>
<b>Other dropdown 1</b>:
<select class='secondary' id="Qualifications" name="Qualifications" onChange="setTextField(this)">
<option value="select">select</option>
<option value="treatmentid1">treatmentname1</option>
<option value="treatmentid2">treatmentname2</option>
</select></div>
<input id="make_text" type="hidden" name="make_text" value="" />
<div> <b>Other dropdown 2</b>:
<select class='secondary' id="Qualifications2" name="Qualifications2">
<option value="select">select</option>
<option value="treatmentid1">treatmentname1</option>
<option value="treatmentid2">treatmentname2</option>
</select>
</form>
PHP Code
$value =$_POST['make_text'];

Html element <select> onchange doesn't fire for programmatic changes, you need to fire it yourself with
$(".secondary").trigger("change");
or by Id
$("#Qualifications").trigger("change");
The problem is that your hidden <input> never had the value. if you remove the hidden it on your code you can check it.
So when you POSTED the values the value on make_text was empty string. So if you fire the trigger after the for loop then it will work.
function setDropDown() {
var index_name = document.getElementsByName('ForceSelection')[0].selectedIndex;
var others = document.querySelectorAll('.secondary');
for (var i = 0; i < others.length; i++) {
others[i].selectedIndex = index_name;
}
$("#Qualifications").trigger("change");
}
function setTextField(ddl) {
document.getElementById('make_text').value = ddl.value;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post">
<div><b>Primary dropdown:</b>
<select name="ForceSelection" id="ForceSelection" onChange="javascript:return setDropDown();">
<option value="" selected>Select</option>
<option value="treatmentid1">treatmentname1</option>
<option value="treatmentid2">treatmentname2</option>
</select>
</div>
<div>
<b>Other dropdown 1</b>:
<select class='secondary' id="Qualifications" name="Qualifications" onChange="setTextField(this)">
<option value="select">select</option>
<option value="treatmentid1">treatmentname1</option>
<option value="treatmentid2">treatmentname2</option>
</select></div>
<input id="make_text" name="make_text" value="" />
<div> <b>Other dropdown 2</b>:
<select class='secondary' id="Qualifications2" name="Qualifications2">
<option value="select">select</option>
<option value="treatmentid1">treatmentname1</option>
<option value="treatmentid2">treatmentname2</option>
</select>
</form>

I have to say that I don't see any need to use a hidden input text to POST data to PHP because you can just post the value of the <select> and retrieve it in PHP like this $force = $_POST["ForceSelection"];.
Otherwise, if you want to continue what you started, you can change your setDropDown() function to this :
function setDropDown() {
#Get the selected value of the ForceSelection select :
var index_name = $('#ForceSelection').val();
#Change the value of the other secondary select :
$(".secondary").each(function( index ) {
$(this).val(index_name).change();//This will change the value and trigger the change event.
});
}

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=””>

How can a visitor add options to a menu through text fields?

I have the following drop down menu.
<select id="MySelectMenu">
<option value="#">-*-*- Main Accounts -*-*-</option>
<option value="http://www.google.com">Google</option>
<option value="http://www.yahoo.com">Yahoo</option>
<option value="http://www.example.com">Example</option>
</select>
Is it possible for me to add two text input fields where the visitor can populate the menu options themselves?
For example, in text field one they input the url for the option, and text field two, they input the name of the option.
So...
Text field one: http://www.randomwebsite.com
Text field two: Random Website
Then an 'Add' button, which would result in this...
<select id="MySelectMenu">
<option value="#">-*-*- Main Accounts -*-*-</option>
<option value="http://www.google.com">Google</option>
<option value="http://www.yahoo.com">Yahoo</option>
<option value="http://www.example.com">Example</option>
<option value="http://www.randomwebsite.com">Random Website</option>
</select>
This is the javascript for the current menu, if this helps.
<script type="text/javascript">
function newSrc() {
var e = document.getElementById("MySelectMenu");
var newSrc = e.options[e.selectedIndex].value;
document.getElementById("MyFrame").src=newSrc;
}
</script>
Thanks in advance.

Yes Create two textboxes and Add id's to them and also create a button with a onclick function "Add", Then use the following javascript which is nothing but creating the option and appending to selectbox
function Add()
{
var x = document.getElementById("MySelectMenu");
var opt = document.createElement("option");
opt.value= document.getElementById("url").value;
opt.innerHTML = document.getElementById("name").value; // whatever property it has
x.add(opt);
}
<select id="MySelectMenu">
<option value="#">-*-*- Main Accounts -*-*-</option>
<option value="http://www.google.com">Google</option>
<option value="http://www.yahoo.com">Yahoo</option>
<option value="http://www.example.com">Example</option>
</select>
<input type="text" name="name" id="name">
<input type="url" name="url" id="url">
<button onclick="Add()">ADD</button>

Try below code
var url=$("#txtUrl").val();
var textValue = $("#txtDisplay").val();
$('#MySelectMenu').append("<option value='"+url+"'>"+textValue+"</option>);
use this code on OnClick event of Add button.

Add value to a drop down menu with a form

Is there a way to insert values in a drop down menu with a simple form? I have this drop down menu
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a category:</option>
<option value="movie">Movie</option>
<option value="musik">Musik</option>
<option value="books">Books</option>
<option value="images">Images</option>
</select>
</form>
Should I use an array? I been searching the net but couldn't find anything that would help.

Here is a JavaScript solution to add items to a drop down.
The HTML to use..
<form>
<select id="categories" name="users" onchange="showUser(this.value)">
<option value="">Select a category:</option>
<option value="movie">Movie</option>
<option value="musik">Musik</option>
<option value="books">Books</option>
<option value="images">Images</option>
</select>
</form>​​
JavaScript code...
var categories = document.getElementById("categories");
var newOption = document.createElement('option');
newOption.innerText = "New value";
newOption.setAttribute('value', 'newvalue');
categories.appendChild(newOption);
​
jQuery code... (a lot shorter)
$("#categories").append("<option value='newvalue'>New Value</option>");
Here is the JavaScript JSFiddle and the jQuery JSFiddle to play with!

You could look into jQuery append() and option() with click event...
I've just created a working solution for you.
Don't know if this is what you was looking for, but this is how it works:
You simply just write the value and visual option name into a form text field: value, text which gives you this:
<option value="value">text</option>
<select id="mySelect"></select>
<p> </p>
<input type="text" id="string"><br>
<button id="append">Append</button>
$('#append').click(function(){
var str = $('#string').val();
var substr = str.split(', ');
$('#mySelect').append( new Option(substr[0],substr[1]));
});
Here is a working version: http://jsfiddle.net/SCf8m/1/