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

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>

image.png image.png image.png

点击设备类别可以切换到输入框

image.png

js函数

<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的值。

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)

        # ...省略其他代码