JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<select name="whatever" onchange="chk(divs); prechk(this.value);">
<option value="1">Show DIV 1</option>
<option value="1,2">Show DIV 1,2</option>
<option value="1,2,3">Show DIV 1,2,3</option>
<option value="1,2,3,4">Show DIV 1,2,3,4</option>
<option value="1,2,3,4,5">Show DIV 1,2,3,4,5</option>
<option value="1,2,3,4,5,6">Show DIV 1,2,3,4,5,6</option>
</select>
	
<div id="div0" class="hide"></div>	
<div id="div1" class="show">This is div 1</div>
<div id="div2" class="hide">This is div 2</div>
<div id="div3" class="hide">This is div 3</div>
<div id="div4" class="hide">This is div 4</div>
<div id="div5" class="hide">This is div 5</div>
<div id="div6" class="hide">This is div 6</div>

<input class="calput2" id="rate" type="number" step="any" maxlength="10" name="rate" value="0.59" />

CSS

<!--
.show
{
	display: block;
}
.hide
{
	display: none;
}
-->

JavaScript

var divs = ["div0", "div1", "div2", "div3", "div4", "div5", "div6"];
//var divs13 = ["div1", "div3"];
//var divs56 = ["div5", "div6"];
function visiblox(arrDiv, hs) {
	var disp = (hs) ? "none" : "block";
	for(var x = 0; x < arrDiv.length; x++) {
		document.getElementById(arrDiv[x]).style.display = disp;
    document.getElementById('rate').value = "";
	}
}

function chk(what, item) {
	if(item) {
		visiblox(what, false);
	} else {
		visiblox(what, true);
	}
}

function prechk(v){
	v = v.split(',');
	for(var i = 0; i < v.length; ++i){
		chk([divs[v[i]]], true);
	}
}