[英]Show/hide div on select tag
I have tried several time to hide div in laravel framework but the code is not working. 我已经尝试了几次在laravel框架中隐藏div但代码不起作用。 There is some error with my JS code, I can't find it.
我的JS代码有一些错误,我找不到它。 Although its working in js fiddle: http://jsfiddle.net/FvMYz/3823/
虽然它在js小提琴工作: 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>
Your code is correct, you just need to add $('#user_role').hide();
你的代码是正确的,你只需要添加
$('#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. on
onload
因为你的脚本在onclick
事件上被调用,因此在点击后调用它,你的默认选项是所有者。
See fiddle: http://jsfiddle.net/FvMYz/3825/ 见小提琴: http : //jsfiddle.net/FvMYz/3825/
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.