BootStrap模态框调用后重置问题

show.bs.modal为模态框显示后触发的事件

模态框样式：

<div class="modal fade" id="detail" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">学生信息</h4>
            </div>
            <div class="modal-body">
            <!--模态框表单-->
                <form class="form-horizontal" style=" 100%;margin: 0 auto;">
                    <div class="form-group">
                        <label for="name" class="col-sm-5 control-label">学员姓名：</label>
                            <div class="col-sm-5">
                                <input type="text" class="form-control" id="name" placeholder="姓名">
                            </div>
                    </div>
                    <hr />
                <div class="form-group">
                    <label for="sex" class="col-sm-5 control-label">性别：</label>
                        <div class="col-sm-5" style="margin-top: 7px;">
                            <input type="radio" id="male" name="sex">男&nbsp;&nbsp;
                                <input type="radio" id="female" name="sex">女
                        </div>
                </div>
                <hr />
                <div class="form-group">
                    <label for="age" class="col-sm-5 control-label">年龄：</label>
                        <div class="col-sm-5">
                            <input type="number" class="form-control" id="age">
                        </div>
                </div>
                <hr />
                <div class="form-group">
                    <label for="direction" class="col-sm-5 control-label">技术方向：</label>
                    <div class="col-sm-5">
                        <select name="" id="direction" class="form-control">
                            <option disabled="disabled" selected="selected">--请选择方向--</option>
                            <option value="JavaEE">JavaEE</option>
                            <option value="大数据">大数据</option>
                        </select>
                    </div>
                </div>
                <hr />
                <div class="form-group">
                    <label for="telephone" class="col-sm-5 control-label">联系方式：</label>
                    <div class="col-sm-5">
                        <input type="text" class="form-control" id="telephone" placeholder="联系方式">
                    </div>
                </div>
            </form>
        </div>
           <div class="modal-footer">
            <button id="detail_btn" type="button" class="btn btn-primary" data-dismiss="modal">确认保存</button>
        </div>
    </div>
</div>
</div>

更新模态框事件：

/*
 * 模态框调用更新
*/
$("#detail").on('show.bs.modal', function() {
    $("#name")[0].value="";
    $("#male")[0].checked = false;
    $("#female")[0].checked = false;
    $("#age")[0].value="";
    $("#direction")[0].selectedIndex = 0;
    $("#telephone")[0].value="";
});