We Keep Coding

Drop down list values depending on a selected value in another drop down list

I have 6 different Items:
Type1Item1
Type1Item2
Type1Item3
Type2Item1
Type2Item2
Type2Item3
of 2 different types:
Type1
Type2
I want to provide 2 DropDownLists: one to select a type, another to select items of the selected type.
Writing just
<select name="ItemTypeSelector" id="ItemTypeSelector">
<option value="Type1">Type1</option>
<option value="Type2">Type2</option>
</select><br>
<select name="ItemSelector" id="ItemSelector">
<option value="Type1Item1">Type1Item1</option>
<option value="Type1Item2">Type1Item2</option>
<option value="Type1Item3">Type1Item3</option>
<option value="Type2Item1">Type2Item1</option>
<option value="Type2Item2">Type2Item2</option>
<option value="Type2Item3">Type2Item3</option>
</select><br>
JSFiddle demo
Would allow users to select Type2 and Type1Item3 which does not make sense since Type1Item3 is of type Type1.
QUESTION: Is there a way to display Items of the drop down list related to the selected ItemType?

Using a select with optgroup may be a viable and simple solution for you:
<select name="ItemSelector" id="ItemSelector">
<optgroup label="Type1">
<option value="Type1Item1">Type1Item1</option>
<option value="Type1Item2">Type1Item2</option>
<option value="Type1Item3">Type1Item3</option>
</optgroup>
<optgroup label="Type2">
<option value="Type2Item1">Type2Item1</option>
<option value="Type2Item2">Type2Item2</option>
<option value="Type2Item3">Type2Item3</option>
</optgroup>
</select>
Read more here

Maybe something like the following :
window.onload = function() {
document.getElementById('ItemTypeSelector').addEventListener('change', function() {
if (this.value == 'Type1') {
for (let el of document.getElementsByClassName('Type1')) el.style.display = 'block';
for (let el of document.getElementsByClassName('Type2')) el.style.display = 'none';
document.getElementById('ItemSelector').getElementsByTagName('option')[0].selected = 'selected'
} else {
for (let el of document.getElementsByClassName('Type1')) el.style.display = 'none';
for (let el of document.getElementsByClassName('Type2')) el.style.display = 'block';
document.getElementById('ItemSelector').getElementsByTagName('option')[3].selected = 'selected'
}
}, false)
for (let el of document.getElementsByClassName('Type2')) el.style.display = 'none';
};
<select name="ItemTypeSelector" id="ItemTypeSelector">
<option value="Type1">Type1</option>
<option value="Type2">Type2</option>
</select><br>
<select name="ItemSelector" id="ItemSelector">
<option value="Type1Item1" class="Type1">Type1Item1</option>
<option value="Type1Item2" class="Type1">Type1Item2</option>
<option value="Type1Item3" class="Type1">Type1Item3</option>
<option value="Type2Item1" class="Type2">Type2Item1</option>
<option value="Type2Item2" class="Type2">Type2Item2</option>
<option value="Type2Item3" class="Type2">Type2Item3</option>
</select><br>

You can toggle a "disabled" attribute. If a user selects type1 you should add a disabled attribute to all type2* options.
I have coded an example with pure Javascript.
window.onload = function() {
let current_val = '';
document.getElementById('ItemTypeSelector').addEventListener('change', function() {
current_val = this.value;
console.log(current_val);
for (let el of document.querySelectorAll('#ItemSelector option')) {
el.style.display = 'none';
}
for (let el of document.querySelectorAll('#ItemSelector option[data-type="'+current_val+'"]')) {
el.style.display = 'block';
}
}, false)
};
<select name="ItemTypeSelector" id="ItemTypeSelector">
<option value="type1">Type1</option>
<option value="type2">Type2</option>
</select><br>
<select name="ItemSelector" id="ItemSelector">
<option>Choose</option>
<option value="Type1Item1" data-type="type1">Type1Item1</option>
<option value="Type1Item2" data-type="type1">Type1Item2</option>
<option value="Type1Item3" data-type="type1">Type1Item3</option>
<option value="Type2Item1" data-type="type2">Type2Item1</option>
<option value="Type2Item2" data-type="type2">Type2Item2</option>
<option value="Type2Item3" data-type="type2">Type2Item3</option>
</select><br>

restart javascript variable when change div

I have two comboboxs and one button in multiple divs. I need to enable the button when the two comboboxs change. This is what I have currently as a Fiddle:
$size=$('select[name=size]');
$gender=$('select[name=gender]');
var op='';
var ep='';
$size.change(function() {
op =$(this).val();
myFunction(op,ep);
});
$gender.change(function() {
ep =$(this).val();
myFunction(op,ep);
});
function myFunction(p1, p2) {
if(p1 !='' && p2!='') {
$('.nextbutton1').prop('disabled',false);
} else {
$('.nextbutton1').prop('disabled', true);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="someclass">
<img src="onepic.png">
<select id="size" name="size">
<option value=""></option>
<option value="1">one</option>
<option value="2">two</option>
</select>
<select id="gender" name="gender">
<option value=""></option>
<option value="1">one</option>
<option value="2">two</option>
</select>
<button class="nextbutton1">button</button>
</div>
<div class="someclass">
<img src="twopic.png">
<select id="size" name="size">
<option value=""></option>
<option value="1">one</option>
<option value="2">two</option>
</select>
<select id="gender" name="gender">
<option value=""></option>
<option value="1">one</option>
<option value="2">two</option>
</select>
<button class="nextbutton1">button</button>
</div>
but when I change the div, the button from the second div is already enabled. How can I reset the variables from the script?

Container
- Combobox1
- Combobox2
- NextButton
Container
- Combobox1
- Combobox2
- NextButton
Loop through Containers and set event listeners for Comboboxes inside each Container separately
$('.someclass').each(function () {
setOnComboboxChange($(this));
});
function setOnComboboxChange($container) {
// Use var keyword to create functional scope variables
var $size = $container.find('select[name=size]');
var $gender = $container.find('select[name=gender]');
var $nextBtn = $container.find('.nextbutton1');
var op = '';
var ep = '';
$size.change(function () {
op = $(this).val();
myFunction(op, ep);
});
$gender.change(function () {
ep = $(this).val();
myFunction(op, ep);
});
function myFunction(p1, p2) {
if (p1 != '' && p2 != '') {
$nextBtn.prop('disabled', false);
} else {
$nextBtn.prop('disabled', true);
}
}
}
Demo on Codepen

just another solution,
you can assign class to each controls and then attach change event to the dropdowns,
and then find the button within parent container using jquery
HTML:
<div class="someclass">
<img src="onepic.png">
<select class="size myFunction">
<option value=""></option>
<option value="1">one</option>
<option value="2">two</option>
</select>
<select class="gender myFunction">
<option value=""></option>
<option value="1">one</option>
<option value="2">two</option>
</select>
<button class="nextbutton1" disabled>button</button>
</div>
<div class="someclass">
<img src="twopic.png">
<select class="size myFunction">
<option value=""></option>
<option value="1">one</option>
<option value="2">two</option>
</select>
<select class="gender myFunction">
<option value=""></option>
<option value="1">one</option>
<option value="2">two</option>
</select>
<button class="nextbutton1" disabled>button</button>
</div>
JS:
$(document).ready(function(){
$(".myFunction").change(function(){
var $this = $(this);
var $container = $($this.parent(".someclass"));
var $next = $($container.find(".nextbutton1"));
var $size = $($container.find(".size"));
var $gender = $($container.find(".gender"));
var p1 = $size.val();
var p2 = $gender.val();
if(p1 !='' && p2!='') {
$next.prop('disabled',false);
} else {
$next.prop('disabled', true);
}
});
});
fiddle: https://jsfiddle.net/xwgz3doj/

javascript code that is used to show a div modified to work with multiple unique divs

I've got a <select> form field, and onchange it runs a javascript function. If the function matches something specific, it shows new form field options located inside of a <div style="display: none;">
I've got a unique situation where I need to use this same code across multiple select boxes; however, each one has a specific name. They are not all the same and need to work independantly. Each one has a unique ID #.
I only want the second select field to show up if "ship with" is selected in the first field.
First, here is the code for the select field
<select name="first_select_option" onchange="ShowDiv(this);">
<option value="">Select Option</option>
<option value="SHIP WITH" id="SHIPWITH_<?php echo $data_order_id; ?>_Show">SHIP WITH</option>';
</select>
Here is the code for the hidden select field. There are multiple of these called dynamically on the page during a php while loop. That is why I am using the <?php echo $data_order_id; ?> inside the id of each one.
<div id="SHIPWITH_<?php echo $data_order_id;?>" style="display: none;">
<select name="secondhiddenselect">
<option value="">SELECT OPTIONS BELOW</option>
</select>
</div>
As you notice I am using a php variable inside the id. That is a unique id assigned to that specific select field inside a while loop. So the more while loops, the more select fields are pupulated, therefore, there end up being a bunch of select fields each with a unique ID all because of the $data_order_id
I need to modify the following script to not only work with a single SHIPWITH, but work with each individual SHIP WITH_{id}
<script type="text/javascript">
function ShowDiv(nameSelect)
{
console.log(nameSelect);
if(nameSelect){
OptionValue = document.getElementById("NEWCC_Show").value;
if(OptionValue == nameSelect.value){
document.getElementById("NEWCC").style.display = "block";
}
else{
document.getElementById("NEWCC").style.display = "none";
}
}
else{
document.getElementById("NEWCC").style.display = "none";
}
}
</script>
I attempted to modify this and make it work by using .split('_') to break the variable up but its not working. I am not as good with JavaScript as I'd like to be. Here is my attempt...
<script type="text/javascript">
function ShowDiv(nameSelect)
{
console.log(nameSelect);
if(nameSelect){
var name = nameSelect;
var splitName = name.split('_');
alert(splitName[1]);
OptionValue = document.getElementById(splitName[0] + splitName[1] + splitName[2]).value;
if(OptionValue == nameSelect.value){
document.getElementById(splitName[0] + splitName[1]).style.display = "block";
}
else{
document.getElementById(splitName[0] + splitName[1]).style.display = "none";
}
}
else{
document.getElementById(splitName[0] + splitName[1]).style.display = "none";
}
}
</script>
So even though there are multiple select fields, the JavaScript ONLY communicates with the specific one that corresponds with the $data_order_id.
Here is an updated snippet to help diagnose problem
function ShowDiv(nameSelect) {
console.log(nameSelect);
if (nameSelect) {
var name = nameSelect;
var splitName = name.split('_');
alert(splitName[1]);
OptionValue = document.getElementById(splitName[0] + splitName[1] + splitName[2]).value;
if (OptionValue == nameSelect.value) {
document.getElementById(splitName[0] + splitName[1]).style.display = "block";
} else {
document.getElementById(splitName[0] + splitName[1]).style.display = "none";
}
} else {
document.getElementById(splitName[0] + splitName[1]).style.display = "none";
}
}
<select name="number_of_skids" onchange="ShowDiv(this);">
<option value="SHIP WITH" id="SHIPWITH_11_Show">SHIP WITH</option>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
</select>
<div id="SHIPWITH_11" style="display: none;">
<select name="ship_with_product">
<option value="">SELECT PRODUCT</option>
<option value="4">1234</option>
</select>
</div>
<select name="number_of_skids" onchange="ShowDiv(this);">
<option value="SHIP WITH" id="SHIPWITH_21_Show">SHIP WITH</option>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
</select>
<div id="SHIPWITH_21" style="display: none;">
<select name="ship_with_product">
<option value="">SELECT PRODUCT</option>
<option value="4">1234</option>
</select>
</div>
<select name="number_of_skids" onchange="ShowDiv(this);">
<option value="SHIP WITH" id="SHIPWITH_33_Show">SHIP WITH</option>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
</select>
<div id="SHIPWITH_33" style="display: none;">
<select name="ship_with_product">
<option value="">SELECT PRODUCT</option>
<option value="4">1234</option>
</select>
</div>

As mentioned in the comments, it looks like you want to get the id of the selected option, not the select. One way of getting that is to use the selectedIndex property of the select in combination with its options collection (you could also use selectedOptions[0], among other techniques).
I've taken the liberty of "correcting" some naming conventions; generally, initial uppercase letters denote an object's constructor, not a plain function or variable. Also, using var (or let or const, depending on the need) before a variable assignment keeps it from becoming a global variable by default. There were a few other minor corrections made I'll leave to you to discover.
function showDiv(nameSelect) {
console.log(nameSelect);
if (nameSelect) {
var selectedOption = nameSelect.options[nameSelect.selectedIndex];
var name = selectedOption.id;
var splitName = name.split('_');
console.log(splitName[1]);
var idOfSection = splitName[0] + '_' + splitName[1];
var optionValue = selectedOption.value;
if (optionValue == nameSelect.value) {
document.getElementById(idOfSection).style.display = "block";
} else {
document.getElementById(idOfSection).style.display = "none";
}
} else {
// Commenting this out, since splitName will be undefined in this branch...
//document.getElementById(splitName[0] + splitName[1]).style.display = "none";
}
}
<select name="number_of_skids" onchange="showDiv(this);">
<option value="SHIP WITH" id="SHIPWITH_11_Show">SHIP WITH</option>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
</select>
<div id="SHIPWITH_11" style="display: none;">
<select name="ship_with_product">
<option value="">SELECT PRODUCT</option>
<option value="4">1234</option>
</select>
</div>
<select name="number_of_skids" onchange="showDiv(this);">
<option value="SHIP WITH" id="SHIPWITH_21_Show">SHIP WITH</option>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
</select>
<div id="SHIPWITH_21" style="display: none;">
<select name="ship_with_product">
<option value="">SELECT PRODUCT</option>
<option value="4">1234</option>
</select>
</div>
<select name="number_of_skids" onchange="showDiv(this);">
<option value="SHIP WITH" id="SHIPWITH_33_Show">SHIP WITH</option>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
</select>
<div id="SHIPWITH_33" style="display: none;">
<select name="ship_with_product">
<option value="">SELECT PRODUCT</option>
<option value="4">1234</option>
</select>
</div>

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