Question

我已经尝试了几次在laravel框架中隐藏div，但代码无效。我的JS代码有一些错误，我无法找到它。虽然它在js中工作：http://jsfiddle.net/FvMYz/3823/

表单中有两个字段：User Type＆amp;角色。当用户选择用户类型为＆＃34;所有者＆＃34;我想让Role字段隐藏，否则应显示Role字段。

<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

您的代码是正确的，您需要在$('#user_role').hide();上添加onload，因为您的脚本会在onclick事件中被调用，因此在点击后会调用它，您的默认选项是所有者。

请参阅小提琴：http://jsfiddle.net/FvMYz/3825/

Answer 2

问题是您在点击时隐藏了选择，尝试使用更改事件。

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

在选择标记上显示/隐藏div

2 个答案: