jquery - Hide Field when value is chosen from dropdown -

i have following forms in register.cshtml

   <div class="form-group" id="nick">             @html.labelfor(m => m.nickname, new { @class = "col-md-2 control-label" })             <div class="col-md-10">                 @html.textboxfor(m => m.nickname, new { @class = "form-control" })             </div>         </div>         <div class="form-group" id="company">             @html.labelfor(m => m.companyname, new { @class = "col-md-2 control-label" })             <div class="col-md-10">                 @html.textboxfor(m => m.companyname, new { @class = "form-control" })             </div>         </div> <div class="form-group" onchange="show()">         @html.label("select role", new { @class = "col-md-2 control-label", @id = "ddlroleid"})         <div class="col-md-10">             @html.dropdownlistfor(model => model.role, model.rolelist, htmlattributes: new { @class = "form-control",  @id = "ddlroleid" })         </div>     </div>  

and

<script language="javascript" type="text/javascript">     function show() {         var ddl = document.getelementbyid('ddlroleid'),             nickform = document.getelementbyid('nick'),             companyform = document.getelementbyid('company');         ddl.addeventlistener('change', function () {             if (this.value === '1') {                 nickform.style.display = 'none';                 companyform.style.display = 'block';             }             else {                 nickform.style.display = 'block';                 companyform.style.display = 'none';             }             if (this.value === '2') {                 companyform.style.display = 'none';                 nickform.style.display = 'block';             }             else {                 companyform.style.display = 'block';                 nickform.style.display = 'none';             }         });         }; </script> 

i want when choose role 1 2 forms (company/nickname) hide. code above don't work. can't find make mistake. may @ dropdownlist. if can me, well.

2 points.

you have 2 ids same. label , dropdown has id ddlroleid. assume want label for="ddlroleid" instead of id="ddlroleid"

also, cant see calling show(). try replacing line window.onload = function () {. or add window.onload = show(); after show function.

so:-

window.onload = function () {     var ddl = document.getelementbyid('ddlroleid'),         nickform = document.getelementbyid('nick'),         companyform = document.getelementbyid('company');     ddl.addeventlistener('change', function () {         if (this.value === '1') {             nickform.style.display = 'none';             companyform.style.display = 'block';         }         else {             nickform.style.display = 'block';             companyform.style.display = 'none';         }         if (this.value === '2') {             companyform.style.display = 'none';             nickform.style.display = 'block';         }         else {             companyform.style.display = 'block';             nickform.style.display = 'none';         }     });  };