javascript - 为 array-id-ed 表单元素创建一个通用的 jquery 函数

Question

我有这样的情况

<select id=category[0]>
@foreach($categories as $category)
<option value="{{$category->name}}">
@endforeach
</select>

<select id=item[0]>

</select>

根据用户的请求，将形成许多这样的category[i]和item[i] id-ed表单元素。我根据在 JS onChange 函数下使用 AJAX 选择的 Category[i] 值来填充 item[i] 选择列表。

如何创建一个可以处理这种 arrayed-id 结构的通用 js 函数？我为一个 id 写的一个是:

$(document).on('change', '#category', function () {
    //console.log("its working");
    var token = $('#_token').val();
    var id = $(this).val();
    //console.log(id);
    $.ajax({
        type: 'post',
        url: '/finditems',
        data: { category_id: id, _token: token },
        dataType: 'JSON',
        success: function (data) {
            console.log(data);
            $('#item').empty();
            $('#item').append('<option value="0">--Select an item--</option>');
            for (var i = 0; i < data.length; i++) {
                $('#item').append('<option value="' + data[i].id + '">' + data[i].name + '</option>');
            }
        },
        error: function () {
            console.log("error occurred");
        }
    });
});

我可以有可变数量的 id，因此不可能为每个都写入。因此，我决定创建一个通用函数来处理这一切。如何编写这样一个接受变量 id 并将更改更改为相应值元素的 onChange 函数？

Answer 1

这应该可以解决问题。

<div class="form-group">
    Select category
    <div class="0">
        <select class="form-control" id="category_id" name="category_id[0]">
            <option selected>--Select a category--</option>
            @foreach ($categories as $category)
            <option value="{{$category->id}}">{{$category->name}}</option>
            @endforeach
        </select>
    </div>
</div>

Javascript部分:

 $(document).on('change','#category_id',function(){

       var bau=$(this).parent().attr('class');
       console.log('this is the bau '+bau);
       var classnaam=bau;
       var adhesive='#here .rowa';
       if (classnaam==0)
        {var adhesive='.rowa';}
        // var classnaam=($(this).attr('class').split(' ')[1]);
        // console.log(classnaam);

        var token=$('#_token').val();
        var id=$(this).val();
         //console.log(id);
        $.ajax({
          type : 'post',
          url:'/finditems',
          data:{category_id:id, _token:token},
          dataType:'JSON',
          success:function(data){
            console.log(data);

            $(adhesive+' .'+classnaam+' #item').empty();
            $(adhesive+' .'+classnaam+' #item').append('<option value="0">--Select an item--</option>');
                    for(var i=0;i<data.length;i++) {
                        $(adhesive+' .'+classnaam+' #item').append('<option value="'+ data[i].id +'">'+ data[i].name +'</option>');
                    }
                    },
          error:function(){

            console.log("error occurred");
          }
        });
      }
    );

逻辑非常简单。我希望你能明白。如果没有请随时询问。