When I click on another, the previous should not be visible.
I want that if I select A, and then B, and then C, the inner HTML should show C content only. Can someone help me with how to do this?
I actually need it for a jsp form where I can toggle between the options and then get parameter. I am stuck on this.
function myFunction() {
if (document.getElementById("abcid").selectedIndex == "1") {
document.getElementById("aid").innerHTML = "A:<select>" +
"<option>Select-</option>" +
"<option>Alex</option>" +
"<option>Jack</option>" +
"</select>";
} else if (document.getElementById("abcid").selectedIndex == "2") {
document.getElementById("bid").innerHTML = "B:<select>" +
"<option>Select-</option>" +
"<option>US</option>" +
"<option>Australia</option>" +
"<option>India</option>" +
"</select>";
} else if (document.getElementById("abcid").selectedIndex == "3") {
document.getElementById("cid").innerHTML = "C:<select>" +
"<option>Select-</option>" +
"<option>Blue</option>" +
"<option>Green</option>" +
"<option>Red</option>" +
"</select>";
}
}<table>
<tr>
<td>ABC:
<select id="abcid" onchange="myFunction()">
<option>Select-</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
</td>
</tr>
<tr>
<td id="aid"></td>
</tr>
<tr>
<td id="bid"></td>
</tr>
<tr>
<td id="cid"></td>
</tr>
</table>an easier way to do this...
const
selectABC = document.querySelector('#abcid')
, trSelect2 = document.querySelector('tr.noDisplay')
, label_2 = trSelect2.querySelector('label')
, select_2 = trSelect2.querySelector('select')
, selCases =
{ A: { label: 'Aaa', sels:[ {k: '1', v:'Alex' }, {k: '2', v:'Jack' } ] }
, B: { label: 'Bbb', sels:[ {k: 'w', v:'US' }, {k: 'x', v:'Australia' }, {k: 'y', v:'India' } ] }
, C: { label: 'Ccc', sels:[ {k: '$', v:'Blue' }, {k: '£', v:'Green' }, {k: '§', v:'Red' } ] }
};
selectABC.onchange = e =>
{
select_2.length = 1
select_2.selectedIndex = 0
label_2.textContent = selCases[selectABC.value].label
selCases[selectABC.value].sels.forEach(({k,v}) => select_2.add( new Option(v,k)) )
trSelect2.classList.remove('noDisplay')
}.noDisplay { display: none; }<table>
<tr>
<td>
<label>ABC:</label>
<select id="abcid">
<option value="" selected disabled>Select-</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</td>
</tr>
<tr class="noDisplay">
<td>
<label></label>
<select>
<option value="" selected disabled>Select-</option>
</select>
</td>
</tr>
</table>Here you can find a solution:
var select = document.querySelector("#abcid");
select.addEventListener('input', function (event) {
var conditionals = document.querySelectorAll('.conditional');
var selectedValue = select.value;
var selectedSub = document.querySelector("#abcid-"+select.value);
for(var i=0; i<conditionals.length; i++){
if(selectedSub.id === conditionals[i].id){
conditionals[i].classList.remove('hide');
conditionals[i].classList.add('show');
}else{
conditionals[i].classList.add('hide');
conditionals[i].classList.remove('show');
}
}
});.hide{
display:none;
}
.show{
display:block;
}ABC:
<select id="abcid">
<option>Select-</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<select id="abcid-A" class="conditional hide">
<option>Select-A</option>
<option>A-A</option>
<option>A-B</option>
<option>A-C</option>
</select>
<select id="abcid-B" class="conditional hide">
<option>Select-B</option>
<option>B-A</option>
<option>B-B</option>
<option>B-C</option>
</select>
<select id="abcid-C" class="conditional hide">
<option>Select-C</option>
<option>C-A</option>
<option>C-B</option>
<option>C-C</option>
</select>