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

# 使用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> ```    点击设备类别可以切换到输入框  ## 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) # ...省略其他代码 ```

明人不说暗话 领红包就是支持！！！ 来都来了，再到页面底部看下呗~ ↓ ↓ ↓

本文地址： http://blog.starmeow.cn/detail/7f6ffaa6bb0b408017b62254211691b5/

很赞哦！ (0)