javascript - 在选择标签上显示/隐藏 div

Question

我曾多次尝试在 Laravel 框架中隐藏 div，但代码不起作用。我的JS代码有一些错误，我找不到它。虽然它在 js fiddle 中工作:http://jsfiddle.net/FvMYz/3823/

表单中有 2 个字段:用户类型和 Angular 色。当用户选择用户类型作为“所有者”时，我希望 Angular 色字段隐藏，否则应显示 Angular 色字段。

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