Показать/скрыть div on select tag

Question

Я попытался несколько раз скрыть div в laravel framework, но код не работает. В моем коде JS есть некоторая ошибка, я не могу ее найти. Хотя его работа в js скрипке: http://jsfiddle.net/FvMYz/3823/

Есть 2 поля в форме: Тип пользователя & Роль. Когда пользователь выбирает «Тип пользователя» как «Владелец», я хочу, чтобы поле «Роль» получило скрытие, должно отображаться поле «Роль».

<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

Проблема заключается в том, что вы скрываете избранных по щелчку, попробуйте событие изменения.

$(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>

Answer 2

Ваш код правильный, вам просто нужно добавить $('#user_role').hide(); на onload, как ваш скрипт вызывался на onclick случае так он вызывается после щелчка и ваш выбор по умолчанию является владельцем.

См скрипка: http://jsfiddle.net/FvMYz/3825/