Show/hide div on select tag

Question

I have tried several time to hide div in laravel framework but the code is not working. There is some error with my JS code, I can't find it. Although its working in js fiddle: http://jsfiddle.net/FvMYz/3823/

There are 2 fields in a form: User Type & Role. When a user selects User Type as "Owner" I want the Role field to get hide else Role field should be displayed.

<select id="basic" name="usertype" class="selectpicker show-tick form-control" >

   @if(isset($user->usertype))  
        <option value="Owner" type="dropdown" @if($user->usertype=='Owner') selected  @endif >Owner</option>
        <option value="User" type="dropdown" @if($user->usertype=='User') selected @endif >User</option>
    @else
        <option value="Owner" type="dropdown">Owner</option>
        <option value="User" type="dropdown">User</option>                                 
    @endif 



</select>
<script type="text/javascript">

    $(document).ready(function(){
        $('#basic').click(function(){
            if($(this).attr('value')=="Owner"){
            $('div#user_role').hide();
        }
        else{
            $('div#user_role').show();
        }
        });
    });
</script>
<div class="form-group" id="user_role">
    <label for="" class="col-sm-3 control-label">Role</label>
    <div class="col-sm-9">
        <select name="role" id="" class="form-control">
             <option value="student" >Student</option>
             <option value="faculty">Faculty</option>
             <option value="management">Management</option>
         </select> 
    </div>
</div>

Answer 1

Your code is correct, you just need to add $('#user_role').hide(); on onload as your script is getting called on onclick event so it gets called after click and your default option is owner.

See fiddle: http://jsfiddle.net/FvMYz/3825/

Answer 2

The problem is that you are hiding the select on click, try with change event.

 $(document).ready(function(){ $(function(){ $("#basic").change(function(){ var value = $(this).val(); var user_role = $("#user_role"); if(value == "Owner"){ user_role.hide(); }else{ user_role.show(); } }); }); }); 

 #user_role{ display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <select id="basic" name="usertype"> <option value="Owner" >Owner</option> <option value="User">User</option> </select> <select id="user_role"> <option value="student">Student</option> <option value="faculty">Faculty</option> <option value="management">Management</option> </select>