We Keep Coding

How to change options of a selection because of another selection with Javascript?

I would like to change the options of a selection dynamically in HTML if a checkbox is checked/because of another selection.
These are my selections:
<!-- choosing -->
<select name="choose" id="choose">
<option value="">-- choose --</option>
<option value="o1">Option1</option>
<option value="o2">Option2</option>
</select>
<!-- if choose == o1 -->
<select name="subject1" id="subject1">
<option value="">-- choose --</option>
<option value="Religion">Religion</option>
<option value="Spansich">Spanisch</option>
<option value="Französisch">Französisch</option>
<option value="Englisch">Englisch</option>
<option value="Latein">Latein</option>
</select>
<!-- if choose == o2 -->
<select name="subject2" id="subject2">
<option value="">-- choose --</option>
<option value="Geschichte">Geschichte</option>
<option value="GMK">GMK</option>
<option value="WBS">WBS</option>
<option value="Kunst">Kunst</option>
</select>
I guess you would use JavaScript for this, but I'm really new to all of that, so, could you show me what kind of function could be used to solve this.

<select name="choose" id="choose">
<option value="">-- choose --</option>
<option value="o1">Option1</option>
<option value="o2">Option2</option>
</select>
<select name="subject" id="subject"></select>
<script>
const option = document.getElementById("choose")
option.addEventListener("change", (evt) => {
let options1 = `<option value="">-- choose --</option>
<option value="Religion">Religion</option>
<option value="Spansich">Spanisch</option>
<option value="Französisch">Französisch</option>
<option value="Englisch">Englisch</option>
<option value="Latein">Latein</option>`
let options2 = `<option value="">-- choose --</option>
<option value="Geschichte">Geschichte</option>
<option value="GMK">GMK</option>
<option value="WBS">WBS</option>
<option value="Kunst">Kunst</option>`
if(option.value == "o1")
document.getElementById("subject").innerHTML = options1;
else if(option.value == "o2")
document.getElementById("subject").innerHTML = options2;
else
document.getElementById("subject").innerHTML = '';
})
</script>

Try this
<select name="choose" id="choose" onchange="custom_change()">
<option value="">-- choose --</option>
<option value="o1">Option1</option>
<option value="o2">Option2</option>
</select>
<select name="subject2" id="subject"></select>
<script>
function custom_change()
{
var choose_value = document.getElementById("choose").value;
var option_1 = "<option value=''>-- choose --</option><option value='Religion'>Religion</option><option value='GMK'>GMK</option><option value='WBS'>WBS</option><option value='Kunst'>Kunst</option>";
var option_2 = "<option value=''>-- choose --</option><option value='Geschichte'>Geschichte</option><option value='GMK'>GMK</option><option value='WBS'>WBS</option><option value='Kunst'>Kunst</option>";
if(choose_value == "o1")
document.getElementById("subject").innerHTML = option_1;
else if(choose_value == "o2")
document.getElementById("subject").innerHTML = option_2;
else
document.getElementById("subject").innerHTML = '';
}
</script>

how to make two level select option category and subcategory with attribute required?

how to make two level SELECT OPTION category and subcategory - all level must required
<select id="category" required>
<option value="">select model type</option>
<option class="Volvo" value="1">Volvo</option>
<option class="Saab" value="2">Saab</option>
<option class="Opel" value="3">Opel</option>
<option class="Audi" value="4">Audi</option>
</select>
<select id="subcategory" required>
<optgroup class="Volvo">
<option value="">select model type</option>
<option value="44">XC60</option>
<option value="55">XC90</option>
</optgroup>
<optgroup class="Saab">
<option value="">select model type</option>
<option value="66">Saab 9XX</option>
<option value="77">Saab Aero-X</option>
</optgroup>
<optgroup class="Opel">
<option value="">select model type</option>
<option value="88">Corsa A</option>
<option value="99">Corsa B</option>
</optgroup>
<optgroup class="Audi">
<option value="">select model type</option>
<option value="616">Audi A4</option>
<option value="717">Audi A8</option>
</optgroup>
</select>
i need samthing like this
with javascript or jquery ?
i don't now how works javascript and i need help thanks

Here's a plan vanilla JS approach. The magic of showing the red validation comes from the combination of Javascript and CSS.
First get the values of the DOM elements by document.getElementById().
Get the values of the <option> tags.
Check if the .value of the <option> tag is not not the default one.
If it is, the add the CSS class to the <label> which shows the Required text and add the CSS class to add a border to the <option> tag.
If it is not the default value, then remove the CSS classes from the <label> and <option>
var categoryChanged = function() {
var category = document.getElementById('category');
var subcategory = document.getElementById('subcategory');
var option = category[category.selectedIndex].value;
switch (option) {
case "1":
subcategory.children[0].style.display = "block";
subcategory.children[1].style.display = "none";
subcategory.children[2].style.display = "none";
subcategory.children[3].style.display = "none";
break;
case "2":
subcategory.children[0].style.display = "none";
subcategory.children[1].style.display = "block";
subcategory.children[2].style.display = "none";
subcategory.children[3].style.display = "none";
break;
case "3":
subcategory.children[0].style.display = "none";
subcategory.children[1].style.display = "none";
subcategory.children[2].style.display = "block";
subcategory.children[3].style.display = "none";
break;
case "4":
subcategory.children[0].style.display = "none";
subcategory.children[1].style.display = "none";
subcategory.children[2].style.display = "none";
subcategory.children[3].style.display = "block";
break;
}
}
var validateCategories = function() {
// Step 1
var category = document.getElementById('category');
var subcategory = document.getElementById('subcategory');
var categoryLabel = document.getElementById('categoryLabel');
var subcategoryLabel = document.getElementById('subcategoryLabel');
// Step 2
var categoryText = category[category.selectedIndex].text; // Don't need this, only shown to show you how to get the text
var categoryValue = category[category.selectedIndex].value;
var subcategoryText = subcategory[subcategory.selectedIndex].text; // Don't need this, only shown to show you how to get the text
var subcategoryValue = subcategory[subcategory.selectedIndex].value;
// Step 3 for category <option>
if (categoryValue === "") {
// Step 4 for category <option>
category.classList.add('not-valid');
categoryLabel.classList.remove('validated-label');
categoryLabel.classList.add('required-label');
} else {
// Step 5 for category <option>
category.classList.remove('not-valid');
categoryLabel.classList.remove('required-label');
categoryLabel.classList.add('validated-label');
}
// Step 3 for subcategory <option>
if (subcategoryValue === "") {
// Step 4 for subcategory <option>
subcategory.classList.add('not-valid');
subcategoryLabel.classList.remove('validated-label');
subcategoryLabel.classList.add('required-label');
} else {
// Step 5 for subcategory <option>
subcategory.classList.remove('not-valid');
subcategoryLabel.classList.remove('required-label');
subcategoryLabel.classList.add('validated-label');
}
};
.not-valid {
border: 5px solid red;
}
.validated-label {
display: none;
}
.required-label {
color: red;
display: visible;
}
<label for="category" id="categoryLabel" class="validated-label">Required</label>
<select id="category" onchange="categoryChanged()" required>
<option value="">select model type</option>
<option class="Volvo" value="1">Volvo</option>
<option class="Saab" value="2">Saab</option>
<option class="Opel" value="3">Opel</option>
<option class="Audi" value="4">Audi</option>
</select>
<label for="subcategory" id="subcategoryLabel" class="validated-label">Required</label>
<select id="subcategory" required>
<optgroup class="Volvo" hidden>
<option value="">select model type</option>
<option value="44">XC60</option>
<option value="55">XC90</option>
</optgroup>
<optgroup class="Saab" hidden>
<option value="">select model type</option>
<option value="66">Saab 9XX</option>
<option value="77">Saab Aero-X</option>
</optgroup>
<optgroup class="Opel" hidden>
<option value="">select model type</option>
<option value="88">Corsa A</option>
<option value="99">Corsa B</option>
</optgroup>
<optgroup class="Audi" hidden>
<option value="">select model type</option>
<option value="616">Audi A4</option>
<option value="717">Audi A8</option>
</optgroup>
</select>
<button onclick="validateCategories()">Validate</button>

Select primary dropdown and force other dropdowns to select the option with the same value

When the Primary dropdown changes, I want the other dropdown to change accordingly.
But I dont know why only the 1st Other dropdown is working while the 2nd fails to change its value accordingly. I
m aware that if I change the name of the 2nd dropdown to the same as the 1st dropdown it will work.
But as they are different fields that are to be saved in the db, so the names have to be different.
Any solution would be appreciated. Many thanks.
function setDropDown() {
var index_name =
document.getElementsByName('ForceSelection')[0].selectedIndex;
var others = document.getElementsByName('Qualifications');
for (i = 0; i < others.length; i++)
others[i].selectedIndex = index_name;
var others2 = document.getElementsByName('Qualifications2');
for (i = 0; i < others2.length; i++)
others2[i].selectedIndex = index_name2;
}
Primary dropdown<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> other dropdown
<select id="Qualifications" name="Qualifications">
<option value="select">select</option>
<option value="treatmentid1">treatmentname1</option>
<option value="treatmentid2">treatmentname2</option>
</select> other dropdown2
<select id="Qualifications2" name="Qualifications2">
<option value="select">select</option>
<option value="treatmentid1">treatmentname1</option>
<option value="treatmentid2">treatmentname2</option>
</select>

Add a css class to your secondary drop downs and use document.querySelectorAll to get them all at once.
Then you can use a single loop to update their selectedIndex.
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;
}
}
div {
padding: 15px;
}
<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">
<option value="select">select</option>
<option value="treatmentid1">treatmentname1</option>
<option value="treatmentid2">treatmentname2</option>
</select></div>
<div> <b>Other dropdown 1</b>:
<select class='secondary' id="Qualifications2" name="Qualifications2">
<option value="select">select</option>
<option value="treatmentid1">treatmentname1</option>
<option value="treatmentid2">treatmentname2</option>
</select>
</div>

So it turns out i haven't defined sth in my code, thanks for pointing that out #Tiny Giant
function setDropDown() {
var index_name =
document.getElementsByName('ForceSelection')[0].selectedIndex;
var index_name2 =
document.getElementsByName('ForceSelection')[0].selectedIndex;
var others = document.getElementsByName('Qualifications');
for (i = 0; i < others.length; i++)
others[i].selectedIndex = index_name;
var others2 = document.getElementsByName('Qualifications2');
for (j = 0; j < others2.length; j++)
others2[j].selectedIndex = index_name2;
}
Primary dropdown<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> other dropdown
<select id="Qualifications" name="Qualifications">
<option value="select">select</option>
<option value="treatmentid1">treatmentname1</option>
<option value="treatmentid2">treatmentname2</option>
</select> other dropdown2
<select id="Qualifications2" name="Qualifications2">
<option value="select">select</option>
<option value="treatmentid1">treatmentname1</option>
<option value="treatmentid2">treatmentname2</option>
</select>

Getting value of drop down list JavaScript

How to make that the all selected options, not the values, but the actual text, would be displayed somewhere?
Html:
<h1>Made your PC:</h1>
<div>
<label>Processeor: </label><select id="processor" name="processor">
<option class="label" value>Select Processor</option>
<!-- Home Ware -->
<option value="P1">Processor 1</option>
<option value="P2">Processor 2</option>
<option value="P3">Processor 3</option>
<option value="P4">Processor 4</option>
</select>
</div>
<p><strong>Only compatible components will show.</strong></p>
<div>
<label>Select motherboard: </label><select id="motherboard" name="motherboard" class="subcat" disabled="disabled">
<option class="label" value>Select Motherboard</option>
<!-- Home Ware -->
<option rel="P1 P2" value="AS1">ASUS RAMPAGE V EXTREME</option>
<option rel="P2 P3" value="AS2">ASUS ATX DDR3 2600 LGA</option>
<option rel="P1 P3 P4" value="GB1">Gigabyte AM3+</option>
<option rel="P2 P4" value="MSI1">MSI ATX DDR3 2600 LGA 1150</option>
</select>
</div>
<div>
<label>Select RAM: </label> <select disabled="disabled" class="subcat" id="RAM" name="RAM">
<option class="label" value>RAM Memory</option>
<option rel="AS1 AS2 GB1" value="KI1">Kingston Value RAM</option>
<option rel="AS1 AS2 MSI1" value="P5KPL">P5KPL-AM SE</option>
<option rel="MSI1 GB1" value="960GM">960GM-VGS3 FX </option>
</select>
</div>
<div>
<label>Select Video Board: </label> <select disabled="disabled" class="subcat" id="video-card" name="video-card">
<option class="label" value>Video Card</option>
<option rel="MSI1 AS2" value="EVGA8400">EVGA GeForce 8400 GS</option>
<option rel="AS1" value="XFXAMD">XFX AMD Radeon HD 5450</option>
<option rel="MSI1 GB1" value="GTX750Ti">EVGA GeForce GTX 750Ti SC</option>
</select>
</div>
Javascript:
$(function(){
var $supcat = $("#processor"),
$cat = $("#motherboard"),
$subcat = $(".subcat");
$supcat.on("change",function(){
var _rel = $(this).val();
$cat.find("option").attr("style","");
$cat.val("");
if(!_rel) return $cat.prop("disabled",true);
$cat.find("[rel~='"+_rel+"']").show();
$cat.prop("disabled",false);
});
$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);
});
});
I tried this one code that was posted earlier, but it only display one selection, right after picking, is there any way it could display all the selections and with my random text, like "Your selections"?:
<script>
function myNewFunction(sel)
{
alert(sel.options[sel.selectedIndex].text);
}
</script>
<select id="box1" onChange="myNewFunction(this);" >
<option value="98">dog</option>
<option value="7122">cat</option>
<option value="142">bird</option>
</select>

This should give the actual label text, not the value, for a given select-element.
$(selector).find(":checked").html()
So if you want to show all of them, you could do something like this:
$("#video-card").on("change", function () {
var choices = [];
$("select").each(function() {
choices.push($(this).find(":checked").html());
});
alert("You selected: " + choices.join(', '));
})
And here's a codepen for demo purposes
http://codepen.io/anon/pen/XbjKYQ

function myNewFunction(sel) {
alert($(sel).val());
}
This should actually be working.
If that doesn't work, try to place a window.setTimeout(function() { ... }, 10); around your alert. It's possible that the browser calls the myNewFunction() method before it updates the selection value when the user clicks on one option.
EDIT: If you want the text instead of the value, use
alert($(sel).find("option:selected").text());

You need to loop through each of the selects, not just the first one:
function updateOutput() {
var selects = document.getElementsByTagName('SELECT');
var output = document.getElementById('output');
var arr = [];
for (i=0; i < selects.length; i++) {
arr.push(selects[i].options[selects[i].selectedIndex].text);
}
output.innerHTML = arr.join('; ');
return arr;
}
In this case, I push all the values into an array and then join the array values at the end to create the final string.
I updated a codepen provided earlier: http://codepen.io/anon/pen/WvGxgz

getting the value of dropdown menu's and displaying choice using JS

Once the user chooses which flavour they want, I want to be able to display a message on the webpage with the choices they have made from the drop-downs after the submit button is clicked. Here is what I have so far:
<select name="flavour1" required>
<option value="">Please select a Flavour!</option>
<option value="apple">Apple</option>
<option value="strawberry">Strawberry</option>
<option value="lemon">lemon</option>
<option value="pear">Pear</option>
<option value="cola">Cola</option>
<option value="lime">Lime</option>
</select>
<select name="flavour2" required>
<option value="">Please select a Flavour!</option>
<option value="noflavour">No More Flavours!</option>
<option value="apple">Apple</option>
<option value="strawberry">Strawberry</option>
<option value="lemon">lemon</option>
<option value="pear">Pear</option>
<option value="cola">Cola</option>
<option value="lime">Lime</option>
</select>
<input type="submit" value="Get your Flavour!!" onclick="getFlavour()">
JavaScript to attempt to display message into element with id: "postFlavour"
function getFlavour(){
var flavour1 = getElementById("flavour1").value;
var flavour2 = getElementById("flavour1").value;
document.getElementById("postFlavour").innerHTML = "Congratulations, here are your chosen flavours: "+flavour1+", "+flavour2;
}

function getFlavour(){
var sel1 = getElementById("flavour1");
var sel2 = getElementById("flavour2");
var flavour1 = sel1.options[sel1.selectedIndex];
var flavour2 = sel2.options[sel2.selectedIndex];
document.getElementById("postFlavour").innerHTML = "Congratulation, here are your chosen flavours: "+flavour1+", "+flavour2;
return false;
}