Блог

Главная - Вопросы по программированию - Добавьте нулевое значение перед заполнением блока с помощью district и так далее с помощью Ajax

Добавьте нулевое значение перед заполнением блока с помощью district и так далее с помощью Ajax

#jquery #ajax

#jquery #ajax

Вопрос:

У меня есть код, который заполняет блок при выборе округа.

Но я хочу добавить это

<option value=''>Select</option>

перед заполнением блока значениями

Пример :-

Перед выбором District

 District
<option>Dist 1</option>
<option>Dist 2</option>
<option>Dist 3</option>
<option>Dist 4</option>

Block
<option>Select District First</option>

После выбора district

 District
<option>Dist 2</option>
//Other District options are available here

Block
<option>Select Block</option>  //I want to add this option
<option>Block 1 for District 2</option>
<option>Block 2 for District 2</option>
<option>Block 3 for District 2</option>

Итак, когда пользователь выбирает другой блок из списка отправленных данных Ajax, появится пустой параметр. После изменения блока будут изменены другие параметры (относящиеся к onchange блоку)

Вот мой код

Ajax

  
  $('#district').on('change',function(){
   var district = $('#district').val();
 
     //console.log("State Name for Country",countryname);

       if(!district){
         return;
       }
       $.ajaxSetup({
           headers: {
               'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
           }
           });  
                $.ajax({
                       type:'GET',
                       url: 'get-block?district=' district,
                       success:function(response){
                         // console.log(response);
                         if(response){
                            
                           $("#block").empty();
                           
                           
                            $.each(response,function(key,value){
                             
                               $("#block").append('<option value="' value '">' key '</option>');
                               });
                         }
                     },
  
                }); //ajax ends
   
    });

HTML-блейд

 <div class="form-group has-feedback">
                   <label>District</label>
                   <select class="form-control" id="district" name="district">
                      <option value="">Select</option>
                      @foreach($district as $district)
                        <option value="{{$district->TDM_Dist_Code}}">{{$district->TDM_Dist_Name}}</option>
                      @endforeach
                   </select>
                </div>
                 <div class="form-group has-feedback">
                   <label>Block</label>
                   <select class="form-control" id="block" name="block">
                      <option value="" id="after_block">Select</option>
                   </select>
                </div>

Комментарии:

1. вы просто хотите очистить список блоков при изменении района?

2. @RahulR. ДА. Очистите список блокировок после изменения района. Но в списке блоков должна быть опция с нулевым значением

3. Привет, просто используйте $("#block").append("<option value=''>Select</option>") после опустошения вашего поля выбора

4. @Swati Но, как заполнить остальные данные блоками? Это означает, что должно быть значение » » (с опцией выбора), а остальные будут относиться blocks к определенному району.

5. вы хотите всегда сохранять это нулевое значение в списке блоков? Я имею в виду и во время смены района тоже?

Ответ №1:

Вы можете очистить содержимое select, как показано ниже:

 $("#block").empty();

затем при заполнении новых значений для района просто используйте :

 $("#block").append("<option value=''>Select</option>");

чтобы добавить пустой параметр с помощью.

Таким образом, ваш код будет выглядеть примерно так:

 $('#district').on('change', function () {
    var district = $('#district').val();

    //console.log("State Name for Country",countryname);

    if (!district) {
        return;
    }
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    //Just before making ajax empty the select list, 
    // with this if your ajax fails, you wont have wrong data against district.
    $("#block").empty();

    $.ajax({
        type: 'GET',
        url: 'get-block?district='   district,
        success: function (response) {
            // console.log(response);
            if (response) {

                $("#block").append("<option value=''>Select</option>");

                $.each(response, function (key, value) {
                    $("#block").append('<option value="'   value   '">'   key   '</option>');
                });
            }
        },

    }); //ajax ends

});