根据选择选项元素中选择的选项显示隐藏的div元素

Question

I have a div "businessmodel" with some html element inside that is hidden by default and I want it to display when the option selected in the select option "accounttype" is provider.

Please see the code here:

JavaScript

    <script type="text/javascript">
    $('#accounttype').bind('change', function(event) {
    var i= $('#accounttype').val();

    if(i=="0") 
    {
    $('#businessmodel').hide();
    }
    elseif(i=="1")
    {

    $('#businessmodel').show();

    }
    });
    </script>

HTML

Account Type

    <select  name="type" required="" class='selector' id="accounttype" onchange="change(this)">
    <option value='0'>User</option>
    <option value='1'>Provider</option> 
    </select>                   
    <div id="businessmodel" style="display:none;">
    <p id="modellevel" >Business model</p>
    <select  name="model" required="" class='selector' id="model">
    <option value='choose' >Choose Business Model</option>
    <option value='ALPHA' >ALPHA</option>
    <option value='Thecla'>Thecla</option>
    <option value='Sixtus'>Sixtus</option>
    <option value='Marthar'>Marthar</option>
    <option value='Alma' >Alma</option>
    <option value='Manuel'>Manuel</option>
    <option value='Dum'>Dum</option>
    <option value='Gech'>Gech</option>
    <option value='Alba'>Hika</option>
    <option value='Win'>Win</option>
    <option value='Rex'>Rex</option>
    <option value='Hika'>Hika</option>
    </select>
    </div>

Answer 1

<select  name="type" required="" class='selector' id="accounttype">
    <option value='0'>User</option>
    <option value='1'>Provider</option> 
    </select>   
  <div id="businessmodel" >
    <p id="modellevel" >Business model</p>
    <select  name="model" required="" class='selector' id="model">
    <option value='choose' >Choose Business Model</option>
    <option value='ALPHA' >ALPHA</option>
    <option value='Thecla'>Thecla</option>
    <option value='Sixtus'>Sixtus</option>
    <option value='Marthar'>Marthar</option>
    <option value='Alma' >Alma</option>
    <option value='Manuel'>Manuel</option>
    <option value='Dum'>Dum</option>
    <option value='Gech'>Gech</option>
    <option value='Alba'>Hika</option>
    <option value='Win'>Win</option>
    <option value='Rex'>Rex</option>
    <option value='Hika'>Hika</option>
    </select>
    </div>

 $('#accounttype').on('change', function(event) {
    var i= $('#accounttype').val();

    if(i=="0") 
    {
     $('#businessmodel').hide();
    }
    else
    {
     $('#businessmodel').show();
    }
    });

Answer 2

Try this code.

    $('#accounttype').on('change', function() {
      var i = this.value;
      if(i=="0") 
      {
        $('#businessmodel').hide();
      }
      else
      {
        $('#businessmodel').show();
      }
    }

Answer 3

Try this

<script type="text/javascript">
$(document).ready(function() {
$('select').change(function () {
    $('.business').toggleClass('hide');
});
});
</script>

<style type="text/css">
    .accounttype {
        border: 1px solid;
        margin: 5px;
        padding: 10px;
    }
    .business {
        border: 1px solid;
        margin: 5px;
        padding: 10px;
    }
    .hide {
        display: none;
    }
</style>

<div class="accounttype">
    Show business model : 
    <select>
        <option value="no">No</option>
        <option value="yes">Yes</option>
    </select>
</div>
<div class="business hide">
    Some content goes here
</div>