Question

I have this situation like

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

<select id=item[0]>

</select>

Upon the request of user many such category[i] and item[i] id-ed form elements will be formed. I'm filling the item[i] select list on the basis of the category[i]'s value that has been selected using AJAX underneath JS onChange function.

How do I create a common js function that could handle such arrayed-id structure? One I wrote for one single id is:

$(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");
        }
    });
});

I could have a variable number of ids so it isn't possible to write for each. So, I decided to make a common function that would handle it all. How do I write such an onChange function accepting variable ids and making change into respective valued elements?

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");
          }
        });
      }
    );

逻辑非常简单。我希望你能得到它。如果没有随意问。

create a common jquery function for array-id-ed form elements

1 个答案: