Develop Reference

Is there a better way to condense these <select> pairs, of two types?

I'm wanting to see if there's a better way to write this, solely in Javascript.
There are two kinds of sets, the first set (C7, T7, C11, T11) have four options in the first select, and then up to two options in the second set.
The second set (14X, 17X) have eight options in the first select, and then up to four options in the second set.
Note, I can't change the values as these are being used for a calculator.
//Set C7
document.addEventListener("DOMContentLoaded", e => {
'use strict';
const combo = document.getElementById("C7-Drawer-Shelf-Combo"),
bench = document.getElementById("C7-Under-Drawer-Bench");
combo.addEventListener("input", e => {
for (let i = 0; i < bench.children.length; i++)
bench.children[i].hidden = e.target.selectedIndex < 2 && i > e.target.selectedIndex;
if (e.target.selectedIndex && e.target.selectedIndex < 2 && bench.selectedIndex > e.target.selectedIndex)
bench.selectedIndex = 0;
});
});
// Set T7
document.addEventListener("DOMContentLoaded", e => {
'use strict';
const combo = document.getElementById("T7-Drawer-Shelf-Combo"),
bench = document.getElementById("T7-Under-Drawer-Bench");
combo.addEventListener("input", e => {
for (let i = 0; i < bench.children.length; i++)
bench.children[i].hidden = e.target.selectedIndex < 2 && i > e.target.selectedIndex;
if (e.target.selectedIndex && e.target.selectedIndex < 2 && bench.selectedIndex > e.target.selectedIndex)
bench.selectedIndex = 0;
});
});
// Set C11
document.addEventListener("DOMContentLoaded", e => {
'use strict';
const combo = document.getElementById("C11-Drawer-Shelf-Combo"),
bench = document.getElementById("C11-Under-Drawer-Bench");
combo.addEventListener("input", e => {
for (let i = 0; i < bench.children.length; i++)
bench.children[i].hidden = e.target.selectedIndex < 2 && i > e.target.selectedIndex;
if (e.target.selectedIndex && e.target.selectedIndex < 2 && bench.selectedIndex > e.target.selectedIndex)
bench.selectedIndex = 0;
});
});
// Set T11
document.addEventListener("DOMContentLoaded", e => {
'use strict';
const combo = document.getElementById("T11-Drawer-Shelf-Combo"),
bench = document.getElementById("T11-Under-Drawer-Bench");
combo.addEventListener("input", e => {
for (let i = 0; i < bench.children.length; i++)
bench.children[i].hidden = e.target.selectedIndex < 2 && i > e.target.selectedIndex;
if (e.target.selectedIndex && e.target.selectedIndex < 2 && bench.selectedIndex > e.target.selectedIndex)
bench.selectedIndex = 0;
});
});
// Set 14X
document.addEventListener("DOMContentLoaded", e => {
'use strict';
const combo = document.getElementById("14X-Drawer-Shelf-Combo"),
bench = document.getElementById("14X-Under-Drawer-Bench");
combo.addEventListener("input", e => {
for (let i = 0; i < bench.children.length; i++)
bench.children[i].hidden = e.target.selectedIndex < 4 && i > e.target.selectedIndex;
if (e.target.selectedIndex && e.target.selectedIndex < 4 && bench.selectedIndex > e.target.selectedIndex)
bench.selectedIndex = 0;
});
});
// Set 17X
document.addEventListener("DOMContentLoaded", e => {
'use strict';
const combo = document.getElementById("17X-Drawer-Shelf-Combo"),
bench = document.getElementById("17X-Under-Drawer-Bench");
combo.addEventListener("input", e => {
for (let i = 0; i < bench.children.length; i++)
bench.children[i].hidden = e.target.selectedIndex < 4 && i > e.target.selectedIndex;
if (e.target.selectedIndex && e.target.selectedIndex < 4 && bench.selectedIndex > e.target.selectedIndex)
bench.selectedIndex = 0;
});
});
<div>
<br /> Set C7
</div>
<select id="C7-Drawer-Shelf-Combo">
<option value="">No Drawer/Shelf Combo</option>
<option value="drawer-shelf-combo-x1">combo-x1</option>
<option value="drawer-shelf-combo-x2">combo-x2</option>
<option value="drawer-shelf-combo-x3">combo-x3</option>
<option value="drawer-shelf-combo-x4">combo-x4</option>
</select>
<select id="C7-Under-Drawer-Bench">
<option value="">No Under Drawer Bench</option>
<option value="under-drawer-bench-x1">bench-x1</option>
<option value="under-drawer-bench-x2">bench-x2</option>
</select>
<div>
<br /> Set T7
</div>
<select id="T7-Drawer-Shelf-Combo">
<option value="">No Drawer/Shelf Combo</option>
<option value="drawer-shelf-combo-x1">combo-x1</option>
<option value="drawer-shelf-combo-x2">combo-x2</option>
<option value="drawer-shelf-combo-x3">combo-x3</option>
<option value="drawer-shelf-combo-x4">combo-x4</option>
</select>
<select id="T7-Under-Drawer-Bench">
<option value="">No Under Drawer Bench</option>
<option value="under-drawer-bench-x1">bench-x1</option>
<option value="under-drawer-bench-x2">bench-x2</option>
</select>
<div>
<br /> Set C11
</div>
<select id="C11-Drawer-Shelf-Combo">
<option value="">No Drawer/Shelf Combo</option>
<option value="drawer-shelf-combo-x1">combo-x1</option>
<option value="drawer-shelf-combo-x2">combo-x2</option>
<option value="drawer-shelf-combo-x3">combo-x3</option>
<option value="drawer-shelf-combo-x4">combo-x4</option>
</select>
<select id="C11-Under-Drawer-Bench">
<option value="">No Under Drawer Bench</option>
<option value="under-drawer-bench-x1">bench-x1</option>
<option value="under-drawer-bench-x2">bench-x2</option>
</select>
<div>
<br /> Set T11
</div>
<select id="T11-Drawer-Shelf-Combo">
<option value="">No Drawer/Shelf Combo</option>
<option value="drawer-shelf-combo-x1">combo-x1</option>
<option value="drawer-shelf-combo-x2">combo-x2</option>
<option value="drawer-shelf-combo-x3">combo-x3</option>
<option value="drawer-shelf-combo-x4">combo-x4</option>
</select>
<select id="T11-Under-Drawer-Bench">
<option value="">No Under Drawer Bench</option>
<option value="under-drawer-bench-x1">bench-x1</option>
<option value="under-drawer-bench-x2">bench-x2</option>
</select>
<div>
<br /> Set 14X
</div>
<select id="14X-Drawer-Shelf-Combo">
<option value="">No Drawer/Shelf Combo</option>
<option value="drawer-shelf-combo-x1">combo-x1</option>
<option value="drawer-shelf-combo-x2">combo-x2</option>
<option value="drawer-shelf-combo-x3">combo-x3</option>
<option value="drawer-shelf-combo-x4">combo-x4</option>
<option value="drawer-shelf-combo-x5">combo-x5</option>
<option value="drawer-shelf-combo-x6">combo-x6</option>
<option value="drawer-shelf-combo-x7">combo-x7</option>
<option value="drawer-shelf-combo-x8">combo-x8</option>
</select>
<select id="14X-Under-Drawer-Bench">
<option value="">No Under Drawer Bench</option>
<option value="under-drawer-bench-x1">bench-x1</option>
<option value="under-drawer-bench-x2">bench-x2</option>
<option value="under-drawer-bench-x3">bench-x3</option>
<option value="under-drawer-bench-x3">bench-x4</option>
</select>
<div>
<br /> Set 17X
</div>
<select id="17X-Drawer-Shelf-Combo">
<option value="">No Drawer/Shelf Combo</option>
<option value="drawer-shelf-combo-x1">combo-x1</option>
<option value="drawer-shelf-combo-x2">combo-x2</option>
<option value="drawer-shelf-combo-x3">combo-x3</option>
<option value="drawer-shelf-combo-x4">combo-x4</option>
<option value="drawer-shelf-combo-x5">combo-x5</option>
<option value="drawer-shelf-combo-x6">combo-x6</option>
<option value="drawer-shelf-combo-x7">combo-x7</option>
<option value="drawer-shelf-combo-x8">combo-x8</option>
</select>
<select id="17X-Under-Drawer-Bench">
<option value="">No Under Drawer Bench</option>
<option value="under-drawer-bench-x1">bench-x1</option>
<option value="under-drawer-bench-x2">bench-x2</option>
<option value="under-drawer-bench-x3">bench-x3</option>
<option value="under-drawer-bench-x3">bench-x4</option>
</select>
Any help would be very much appreciated - thank you!
Also - this is a follow-on from a previous post here if interested:

Select option element JavaScript Console

I want to select 100 from list JavaScript, I'm trying this from console
<div class="dataTables_length" id="Table_6_length">
<label>
<select name="DataTables_Table" aria-controls="DataTables_Table_6" class="form-control input-sm">
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</label></div>
I'm new in JavaScript Please help me

You can loop options for your option like this
let sel = document.getElementsByName('DataTables_Table')[0];
function getSelectedOption(sel) {
var opt;
for ( var i = 0, len = sel.options.length; i < len; i++ ) {
opt = sel.options[i];
if ( opt.value == 100 ) {
break;
}
}
return opt;
}
let opt100 = getSelectedOption(sel);
console.log(opt100)
console.log(opt100.value)
let sel = document.getElementsByName('DataTables_Table')[0];
function getSelectedOption(sel) {
var opt;
for ( var i = 0, len = sel.options.length; i < len; i++ ) {
opt = sel.options[i];
if ( opt.value == 100 ) {
break;
}
}
return opt;
}
let opt100 = getSelectedOption(sel);
console.log(opt100)
console.log(opt100.value)
<div class="dataTables_length" id="Table_6_length">
<label>
<select name="DataTables_Table" aria-controls="DataTables_Table_6" class="form-control input-sm">
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</label></div>

Give a Id to the select
Then it's as simple as
document.getElementById('selecter').value=100;
refer this.

you can simply use .value property for dropdown element
function selectOption(val) {
document.getElementById('dataTable').value = val;
}
<select name="DataTables_Table" id='dataTable' aria-controls="DataTables_Table_6" class="form-control input-sm">
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
<button onclick='selectOption("100")'>select 100</button>
<button onclick='selectOption("50")'>select 50</button>
<button onclick='selectOption("25")'>select 25</button>

How to manipulate selected option's value to be the same as option text with JavaScript

I have this dynamic HTML / JavaScript form that is working great, but I found that when I click submit it is bringing over the value of the option as its index and not as the text within the option.
I have tried altering the JavaScript code but can not seem to figure out how to resolve this.
HTML
<!-- Category -->
<label for="type">Category<span class="required-input"> *</span></label>
<select id="type" name="type" onchange="ChangeTypeList()">
<option value="">--Select--</option>
<option value="Order Inquiry">Order Inquiry</option>
<option value="Product Inquiry">Product Inquiry</option>
</select>
<!-- Sub Category -->
<label for="reason">Sub Category</label>
<select id="reason" name="reason"></select>
JavaScript
var reasons = {};
reasons['Order Inquiry'] = ['Order Status','Order Issue', 'X'];
reasons['Product Inquiry'] = ['Product Weight', 'Product Quality'];
function ChangeTypeList() {
var typeList = document.getElementById("type");
var reasonsList = document.getElementById("reason");
var reasonsType = typeList.options[typeList.selectedIndex].value;
while (reasonsList.options.length) {
reasonsList.remove(0);
}
var decisions = reasons[reasonsType];
if (decisions) {
var i;
for (i = 0; i < decisions.length; i++) {
var decision = new Option(decisions[i], i);
reasonsList.options.add(decision);
// console.log('decision', decision);
}
}
}
When I select the first Category option 'Order Inquiry' and console.log:
console.log('decision', decision);
I see the following in the Console for the Sub Categories:
<option value="0">Order Status</option>
<option value="1">Order Issue</option>
<option value="2">X</option>
Ideally I want to see this is the Console for the Sub Categories:
<option value="Order Status">Order Status</option>
<option value="Order Issue">Order Issue</option>
<option value="X">X</option>

You need to pass decisions[i] as second parameter in Option.
Syntax:new Option(text, value, defaultSelected, selected); More details Option
var reasons = {};
reasons['Order Inquiry'] = ['Order Status','Order Issue', 'X'];
reasons['Product Inquiry'] = ['Product Weight', 'Product Quality'];
function ChangeTypeList() {
var typeList = document.getElementById("type");
var reasonsList = document.getElementById("reason");
var reasonsType = typeList.options[typeList.selectedIndex].value;
while (reasonsList.options.length) {
reasonsList.remove(0);
}
var reason = document.getElementById('reason');
var decisions = reasons[reasonsType];
if (decisions) {
var i;
for (i = 0; i < decisions.length; i++) {
//This line is changed
var decision = new Option(decisions[i], decisions[i]);
reasonsList.options.add(decision);
console.log('decision', decision);
}
}
}
<label for="type">Category<span class="required-input"> *</span></label>
<select id="type" name="type" onchange="ChangeTypeList()">
<option value="">--Select--</option>
<option value="Order Inquiry">Order Inquiry</option>
<option value="Product Inquiry">Product Inquiry</option>
</select>
<!-- Sub Category -->
<label for="reason">Sub Category</label>
<select id="reason" name="reason"></select>

option HTML element has a value and text attribute.
var options = document.getElementById("dropdown").children;
for (var i = 0; i < options.length; i++) {
options[i].value = options[i].text;
}
<select id="dropdown">
<option value="0">A</option>
<option value="1">B</option>
<option value="2">C</option>
</select>

Multiple Select Unselect And Disabled

I Have 2 Multiple Select Field On My Code
I Want Make If All Selected Then Other Option Will Be Unselect And Disabled And Similarly If Other Any Field Selected Then All Option Will Unselect And Disabled
My Code Is
<select multiple name="device[]" id="device" class="form-control" >
<option value=\'ALL\' selected="selected">ALL</option>
<option value=\'Android\'>Android</option>
<option value=\'iPod\'>iPod</option>
<option value=\'iPad\'>iPad</option>
<option value=\'Java\'>Java</option>
<option value=\'Windows\'>Windows</option>
<option value=\'Linux\'>Linux</option>
<option value=\'Mac\'>Mac</option>
</select>
And
<select multiple name="country[]" id="device" class="form-control" >
<option value=\'ALL\' selected="selected">ALL</option>
<option value=\'BD\'>Bangladesh</option>
<option value=\'IN\'>India</option>
<option value=\'ID\'>Indonesia</option>
<option value=\'NG\'>Naigeria</option>
<option value=\'PK\'>Pakistan</option>
</select>

By disabling an element you say i'll not use this element, I refuse to use this elemen, so disabled elements can not get Mouse Events, so disabling is wrong way.
Instead make it visually disabled.
Here is pure JS code, because i am not like jquery ;)
<style>
select {
height:300px;
width:150px;
}
</style>
<body>
<select multiple name="device[]" id="device" class="form-control" onChange="Go()" >
<option value=\'ALL\' selected="selected">ALL</option>
<option value=\'Android\'>Android</option>
<option value=\'iPod\'>iPod</option>
<option value=\'iPad\'>iPad</option>
<option value=\'Java\'>Java</option>
<option value=\'Windows\'>Windows</option>
<option value=\'Linux\'>Linux</option>
<option value=\'Mac\'>Mac</option>
</select>
<select multiple name="country[]" id="device" class="form-control" onChange="Go()" >
<option value=\'ALL\' selected="selected">ALL</option>
<option value=\'BD\'>Bangladesh</option>
<option value=\'IN\'>India</option>
<option value=\'ID\'>Indonesia</option>
<option value=\'NG\'>Naigeria</option>
<option value=\'PK\'>Pakistan</option>
</select>
<script>
function Go(){
parentElements = document.getElementsByTagName("select");
for(var i = 0; i < parentElements.length; i++){
parentElement = parentElements[i]
children = parentElement.childNodes;
for(var j = 0; j < children.length; j++){
childNode = children[j];
if(childNode.nodeName == "OPTION" || childNode.nodeName == "option"){
if(childNode.value == "\\'ALL\\'" && childNode.selected == true){
for(var k = 0; k < children.length; k++){
if(typeof(children[k].value) !== "undefined" && k != j){
children[k].style.color = "#ccc";
children[k].style.textDecorationLine = "line-through";
children[k].selected = false;
}
if(typeof(children[k].value) !== "undefined" && k == j){
children[k].style.color = "";
children[k].style.textDecorationLine = "";
}
}
}
if(childNode.value != "\\'ALL\\'" && childNode.selected == true){
for(var k = 0; k < children.length; k++){
if(typeof(children[k].value) !== "undefined" && children[k].value == "\\'ALL\\'"){
children[k].style.color = "#ccc";
children[k].style.textDecorationLine = "line-through";
children[k].selected = false;
}
if(typeof(children[k].value) !== "undefined" && children[k].value != "\\'ALL\\'"){
children[k].style.color = "";
children[k].style.textDecorationLine = "";
}
}
}
}
}
}
}
</script>
</body>

EDIT:
How about adding an extra button to reset the menus ?
Please check this fiddle
OLD:
If you are not holding ctrl key then other options will be deselected automatically
$(document).ready(function() {
$('#device, #country').on('change', function() {
var selectedVal = $(this).val();
for (var i = 0; i < selectedVal.length; i++) {
if (selectedVal[i] === 'ALL') {
// $("#device > option").attr('disabled','disabled');
$(this).find('option').attr('disabled', 'disabled');
$(this).find('option[value=ALL]').removeAttr('disabled');
} else {
$(this).find('option[value=ALL]').attr('disabled', 'disabled');
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select multiple name="device[]" id="device" class="form-control">
<option value='ALL'>ALL</option>
<option value='Android'>Android</option>
<option value='iPod'>iPod</option>
<option value='iPad'>iPad</option>
<option value='Java'>Java</option>
<option value='Windows'>Windows</option>
<option value='Linux'>Linux</option>
<option value='Mac'>Mac</option>
</select>
<select multiple name="country[]" id="country" class="form-control">
<option value='ALL'>ALL</option>
<option value='BD'>Bangladesh</option>
<option value='IN'>India</option>
<option value='ID'>Indonesia</option>
<option value='NG'>Naigeria</option>
<option value='PK'>Pakistan</option>
</select>

$('#device option').click(function(){
var Allselected = $('#device :selected').text();
var AllselectedCountry = $('#country :selected').text();
if(Allselected =="ALL"){
$('#device option:not(:selected)').addClass('ashClass');
}
else if (Allselected !="ALL"){
$('#device option:first-child').css('color', '#ccc');
$('#device option:not(:selected)').removeClass('ashClass');
}
});
$('#country option').click(function(){
var AllselectedCountry = $('#country :selected').text();
if(AllselectedCountry =="ALL"){
$('#country option:not(:selected)').addClass('ashClass');
}
else if (AllselectedCountry !="ALL"){
$('#country option:first-child').css('color', '#ccc');
$('#country option:not(:selected)').removeClass('ashClass');
}
});
.ashClass {
color: #ccc;
}
.blackClass {
color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<select multiple name="device[]" id="device" class="form-control" >
<option value=\'ALL\' >ALL</option><option value=\'Android\'>Android</option><option value=\'iPod\'>iPod</option><option value=\'iPad\'>iPad</option><option value=\'Java\'>Java</option><option value=\'Windows\'>Windows</option><option value=\'Linux\'>Linux</option><option value=\'Mac\'>Mac</option> </select>
<select multiple name="country[]" id="country" class="form-control" >
<option value=\'ALL\' >ALL</option><option value=\'BD\'>Bangladesh</option><option value=\'IN\'>India</option><option value=\'ID\'>Indonesia</option><option value=\'NG\'>Naigeria</option><option
value=\'PK\'>Pakistan</option></select>
Updated the codes,Hope this one resolves your problem.
Is this what you are asking?

Hide all DIVs that don't contain all specified classes

On my page I have a large number of DIVs, each DIV represents a specific product, with a series of characteristics. I'm using those characteristics as classes, so every product would start similarly to this:
<div class='classA classB classC classD classE classF'>
Product Card
</div>
Ideally on my page I'd like to have one <select> element for each class, so that when the user select a value from the dropdown, only the <div> with the corresponding class remains displayed on the page, while all the others are hidden.
Also, the check on the class has to consider ALL the classes at the same time. By this I mean that if a user selects value from 3 dropdowns, only the <div> that have ALL the 3 classes selected will be shown.
I've tried to implement this idea using javascript, with the following code:
function filterPowerInput() {
var powerInput = document.getElementById("powerInput").value;
if (powerInput == 1) {
var myClasses = document.querySelectorAll('.ph3ph'),
i = 0,
l = myClasses.length;
for (i; i < l; i++) {
myClasses[i].style.display = 'none';
}
var myClassesTwo = document.querySelectorAll('.ph1ph'),
i = 0,
l = myClassesTwo.length;
for (i; i < l; i++) {
myClassesTwo[i].style.display = 'block';
}
} else if (powerInput == 3) {
var myClasses = document.querySelectorAll('.ph1ph'),
i = 0,
l = myClasses.length;
for (i; i < l; i++) {
myClasses[i].style.display = 'none';
}
var myClassesTwo = document.querySelectorAll('.ph3ph'),
i = 0,
l = myClassesTwo.length;
for (i; i < l; i++) {
myClassesTwo[i].style.display = 'block';
}
} else {
var myClasses = document.querySelectorAll('.ph1ph'),
i = 0,
l = myClasses.length;
for (i; i < l; i++) {
myClasses[i].style.display = 'block';
}
var myClassesTwo = document.querySelectorAll('.ph3ph'),
i = 0,
l = myClassesTwo.length;
for (i; i < l; i++) {
myClassesTwo[i].style.display = 'block';
}
}
}
This example works fine for a class that can only assume 2 values, but it becomes impossible to manage as soon as a class has many more value (they could go up to 12). Also, by using similar version of the code above on different dropdowns, they will override each other, I haven't found a way yet to make them work together as I need.
I hope it's clear enough, otherwise just ask. Thanks a lot for your time as always!
(The rest of my page is a mix of PHP/HTML/Javascript)

I think this is what you meant
$(function() {
$(".sel").on("change",function() {
var classLst = ["selDiv"];
$(".sel").each(function() {
var val = this.value;
if (val) classLst.push("class"+val);
});
classLst.sort();
$(".selDiv").each(function() {
var divClassLst = $(this).attr("class");
if (divClassLst) {
$(this).toggle(divClassLst.split(" ").sort().join(".") == classLst.join("."));
}
})
}).change(); // run when loaded
});
.selDiv { display:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<b>Note: Possible combinations: </b><i>A,B,C; D,E</i> and <i>C,D</i>
<hr/>
<select class="sel">
<option value="">Please select</option>
<option value="A" selected>A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
</select>
<select class="sel">
<option value="">Please select</option>
<option value="A">A</option>
<option value="B" selected>B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
</select>
<select class="sel">
<option value="">Please select</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C" selected>C</option>
<option value="D">D</option>
<option value="E">E</option>
</select>
<select class="sel">
<option value="">Please select</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
</select>
<select class="sel">
<option value="">Please select</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
</select>
<div class='selDiv classA classB classC'>
Product Card A B C
</div>
<div class='selDiv classD classE'>
Product Card D E
</div>
<div class='selDiv classC classD'>
Product Card C D
</div>

Something far more important than answer to your question. I know it's not an answer but I had to show the importance of this matter.
As a developer if you write a block of the same code more than once - something is not right. Why not simply writing a function that does the same procedure?
var customtog = function(cls, dis){
var myClasses = document.querySelectorAll(cls),
i = 0,
l = myClasses.length;
for (i; i < l; i++) {
myClasses[i].style.display = dis;
}
}
So look how your code is gonna look now:
Far more easier to follow and maintain.
if(powerInput == 1)
{
customtog('.ph3ph', 'none');
customtog('.ph1ph', 'block');
}
else if(powerInput == 3)
{
customtog('.ph1ph', 'none');
customtog('.ph3ph', 'block');
}
else
{
customtog('.ph1ph', 'block');
customtog('.ph3ph', 'block');
}
Update - Following #mplungjan comment
customtog('.ph3ph', powerInput==1?'none':'block');
customtog('.ph1ph', powerInput==1?'block':'none');