您现在的位置是: 网站首页 >网页前端 网页前端

使用JQuery切换输入框和选择框,后端优先获取输入值

admin2018年12月8日 20:47 Django | Html | JQuery 192人已围观

# 使用JQuery切换输入框和选择框,后端优先获取输入值 ## html模板 ```html <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css"/> <!--还需要引入bootstrap和jquery--> <a class="btn btn-info btn-xs" data-toggle="modal" data-target="#manualCount" title="设备盘点"> 计数盘点</a> <!-- 模态框 --> <div class="modal fade" id="manualCount" tabindex="-1" role="dialog" aria-labelledby="manualCountModalLabel" aria-hidden="true"> <div class="modal-dialog"> <form class="modal-content" method="post" action="{% url 'assets:count_record' floor area seat %}"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> &times; </button> <h4 class="modal-title" id="manualCountModalLabel"> 仓库盘点计数添加到 {{ seat_obj.position }} </h4> <small></small> </div> <div class="modal-body"> <div class="input-group"> <span class="input-group-addon" id="id_category_choose_or_add_count" title="点击可以切换输入或选择">设备类别</span> <input type="text" name="category" class="form-control" placeholder="设备型号" id="id_category_add_count" style="display: none"> <div id="id_category_choose_count"> <select class="form-control select2" name="category_id" style="width: 100%;"> {% for category in all_category %} <option value="{{ category.id }}">{{ category.name }}</option> {% endfor %} </select> </div> </div> <div class="input-group"> <span class="input-group-addon">数量统计</span> <input type="number" name="nums" required class="form-control" placeholder="该设备数量"> </div> <input type="hidden" name="jump" value="{{ request.get_full_path }}"> {% csrf_token %} </div> <div class="modal-footer"> <button type="submit" class="btn btn-primary">提交</button> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> </div> </form><!-- /.modal-content --> </div><!-- /.modal --> </div> ``` ![BLOG_20181208_205028_74](/media/blog/images/2018/12/BLOG_20181208_205028_74.png "博客图集BLOG_20181208_205028_74.png") ![BLOG_20181208_205021_76](/media/blog/images/2018/12/BLOG_20181208_205021_76.png "博客图集BLOG_20181208_205021_76.png") ![BLOG_20181208_204958_38](/media/blog/images/2018/12/BLOG_20181208_204958_38.png "博客图集BLOG_20181208_204958_38.png") 点击设备类别可以切换到输入框 ![BLOG_20181208_204950_83](/media/blog/images/2018/12/BLOG_20181208_204950_83.png "博客图集BLOG_20181208_204950_83.png") ## js函数 ```html <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.min.js"></script> <script> //在BootStrap的modal中使用Select2搜索框无法输入 $.fn.modal.Constructor.prototype.enforceFocus = function () { }; $(document).ready(function () { //Initialize Select2 Elements 初始化多选元素 $('.select2').select2({ language: { noResults: function (params) { return "暂无数据,点击左方切换输入模式"; } } }); }); //点击切换输入框或选择框-手动计数 $("#id_category_choose_or_add_count").click(function () { console.log('点击切换输入框或选择框'); $('#id_category_choose_count').toggle(); $('#id_category_add_count').toggle(); if ($('#id_category_add_count').is(":hidden")) { console.log("input隐藏,后端获取选择"); } else { console.log("切换到输入框,input增加required属性"); $('#id_category_add_count').attr("required", "true"); } }); $(function () { // bootstrap工具tooltip title提示 $('[data-toggle="tooltip"]').tooltip() }) </script> ``` ## 后端处理 由于select时,总是会存在初值,所以优先获取input时候的值,获取不到时,表明是select的情况,获取select的值。 ```python class ManualCountRecord(View): def post(self): # ...省略其他代码 # 先获取输入框中的值,如果输入框有值,则用输入框的,如果没有表明是选择 category_name = request.POST.get('category', '').strip() if category_name: # 获取到输入框的值 if not Category.objects.filter(name=category_name): category = Category() category.name = category_name category.save() else: category = Category.objects.get(name=category_name) else: # 没获取到输入框值,获取select的值 category_id = request.POST.get('category_id') category = Category.objects.get(id=category_id) # ...省略其他代码 ```

很赞哦! (0)

文章交流

  • emoji
0人参与,0条评论

当前用户

未登录,点击   登录

站点信息

  • 建站时间:网站已运行552天
  • 系统信息:Linux
  • 后台程序:Python: 3.6.6
  • 网站框架:Django: 2.2.9
  • 文章统计:219 篇
  • 文章评论:37 条
  • 腾讯分析网站概况-腾讯分析
  • 百度统计网站概况-百度统计
  • 微信公众号:扫描二维码,关注我们
返回
顶部
标题 换行 登录
网站