show multiple text when select option is select

Question

I have multiple div, I want to display 2 hidden text when I select the value of 1, when I choose value of 2 it will display 4 hidden text etc.

 function showDiv(divId, element) { document.getElementById('depositProductType').addEventListener('change', function() { var style = this.value == 1 ? 'block' : 'none'; document.getElementById('allowJoint').style.display = style; document.getElementById('allowTransfer').style.display = style; var style = this.value == 2 ? 'block' : 'none'; document.getElementById('allowJoint').style.display = style; document.getElementById('allowTransfer').style.display = style; document.getElementById('allowDisabling').style.display = style; document.getElementById('createOne').style.display = style; var style = this.value == 3 ? 'block' : 'none'; document.getElementById('allowTransfer').style.display = style; document.getElementById('createOne').style.display = style; }); } 

 <select id="depositProductType" name="prod_type" onchange="showDiv('allowJoint','allowTransfer','allowDisabling','createOne', this)"> <option class="blank" value="">Please select</option> <option value="1">Fixed Deposit</option> <option value="2">Savings Deposit</option> <option value="3">Scheduled Deposit</option> </select> <!-- this is the multiple div I want to display from my html --> <div id="allowJoint"> ------- </div> <div id="allowTransfer"> ------ </div> <div id="allowDisabling"> ------- </div> <div id="createOne"> ---------- </div> 

Answer 1

First change you select to only pass the element

<select id="depositProductType" name="prod_type" onchange="showDiv(this)">

Then you showDiv can no need to listen to event since it is trigger by the onChange event already. Just call your function.

function showDiv(ele) {
    var allowJoint = document.getElementById('allowJoint');
    var allowTransfer = document.getElementById('allowTransfer');
    var allowDisabling = document.getElementById('allowDisabling');
    var createOne = document.getElementById('createOne');
    if(ele.value == 1) {
        allowJoint.style.display = 'block';
        allowTransfer.style.display = 'block';
        allowDisabling.style.display = 'none';
        createOne.style.display = 'none';
    }
    else if(ele.value == 2) {
        allowJoint.style.display = 'block';
        allowTransfer.style.display = 'block';
        allowDisabling.style.display = 'block';
        createOne.style.display = 'block';
    }
    else if(ele.value == 3) {
        allowTransfer.style.display = 'block';
        createOne.style.display = 'block';
        allowJoint.style.display = 'none';
        allowDisabling.style.display = 'none';
    }
}

Answer 2

 function showDiv(element) { var old_element = document.getElementById("depositProductType"); var new_element = old_element.cloneNode(true); old_element.parentNode.replaceChild(new_element, old_element); document.getElementById('depositProductType').addEventListener('change', function() { console.log(this.value) document.getElementById('allowJoint').style.display = (this.value == 1 || this.value == 2) ? 'block' : 'none'; document.getElementById('allowTransfer').style.display = (this.value == 1 || this.value == 2) ? 'block' : 'none'; document.getElementById('allowDisabling').style.display = (this.value == 3 || this.value == 2) ? 'block' : 'none'; document.getElementById('createOne').style.display = (this.value == 3 || this.value == 2) ? 'block' : 'none'; }); } 

 <select id="depositProductType" name="prod_type" onchange="showDiv(this)"> <option class="blank" value="0">Please select</option> <option value="1">Fixed Deposit</option> <option value="2">Savings Deposit</option> <option value="3">Scheduled Deposit</option> </select> <!-- this is the multiple div I want to display from my html --> <div id="allowJoint" style="display: none"> allowJoint </div> <div id="allowTransfer" style="display: none"> allowTransfer </div> <div id="allowDisabling" style="display: none"> allowDisabling </div> <div id="createOne" style="display: none"> createOne </div>