javascript - 获取表单内选择框的数组值

Question

在产品较多的情况下，用户可以动态添加新的下拉框。当我点击提交时，我只想获取表单中“category[]”的值。

这是代码:

<form name="store_category" method="post" enctype="multipart/form-data" action="{{ route('admin.product.category.store') }}">
    {!!csrf_field()!!}
    {!!""; $lang = session('locale') == "" ? "zh" : session('locale'); !!}
    <div class="form-group category-select-container">
        {!! Form::select("categories_$project->id[]", ${"categories_" . $lang}, null, ["class" => "input-sm"]) !!}
        <a href="#" class="btn btn-xs btn-danger btn-remove-category pull-right">{{trans('string.Remove')}}</a>
    </div>
    <div class="form-group">
        <button type="button" class="btn btn-dark btn-add-more-category">{{trans('string.Add More')}}</button>
        <button type="submit" class="btn blue btn-theme-colored">{{trans('string.submit')}}</button>
    </div>
</form>

我试图将数组名称重命名为其他名称，但是当用户动态添加新的下拉框时，它无法按照行的项目编号。

var template = '<div class="form-group category-select-container">'+
                    '{!! Form::select("categories_$project->id[]", ${"categories_" . $lang}, null, ["class" => "input-sm"]) !!}'+
                    '<a href="#" class="btn btn-xs btn-danger btn-remove-category pull-right">{{trans("string.Remove")}}</a>'+
                '</div>';
$('.btn-add-more-category').on('click', function(e){
    e.preventDefault();
    $(this).before(template);
})

Answer 1

我真的很想知道这行在您的 Form::select()

中的输出是什么

categories_$project->id[]

所以无论如何，如果您想对您选择的标签进行分组，您必须为每个标签分配相同的名称。假设您在 $projects 数组中循环。每行都有

<form name="store_category" method="post" enctype="multipart/form-data" action="{{ route('admin.product.category.store') }}"> 
    {!!csrf_field()!!} 
    @php $lang = session('locale') == "" ? "zh" : session('locale'); @endphp
    <div class="form-group category-select-container"> 
        {!! Form::select("category[]", ${"categories_" . $lang}, null, ["class" => "input-sm"]) !!} 
        <a href="#" class="btn btn-xs btn-danger btn-remove-category pull-right">{{trans('string.Remove')}}</a> 
    </div>
    <div class="form-group"> 
        <button type="button" class="btn btn-dark btn-add-more-category">{{trans('string.Add More')}}</button> 
        <button type="submit" class="btn blue btn-theme-colored">{{trans('string.submit')}}</button> 
    </div> 
</form>

接下来，您必须将点击事件绑定(bind)到您所有的.btn-add-more-category。假设您的父表有一个类 .table

<script>
    $(function () {
        $(".table").on("click", ".btn-add-more-category", function(e) {
            var template = '<div class="form-group category-select-container"> ' +
                '{!! Form::select("category[]", ${"categories_" . $lang}, null, ["class" => "input-sm"]) !!} ' +
                '<a href="#" class="btn btn-xs btn-danger btn-remove-category pull-right">{{trans('string.Remove')}}</a>' +
            '</div>';
            var container = $(this).parent();
            $(template).insertBefore(container);
        });
    });
</script>

此外，我建议您将此行移至您的 Controller

$lang = session('locale') == "" ? "zh" : session('locale');