Блог

У меня моя разметка выглядит так:

  <div class="col-md-12 mainDiv">
    <div class="rowDiv"> <!--first row starts-->

        <div class="a1">
            <div class="form-group">
                <div class="dropdown-container-skills">
                    <select class="dropdown-skills">
                        <option>Select Any</option>
                        <option value="S1">Skill 1</option>
                        <option value="S2">Skill 2</option>
                        <option value="S3">Skill 3</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="a1">
            <div class="form-group">
                <div class="dropdown-container-topics">
                    <select class="dropdown-topics">
                        <option>Select Any</option>
                        <option value="T1">Topic 1</option>
                        <option value="T2">Topic 2</option>
                        <option value="T3">Topic 3</option>
                    </select>
                </div>
            </div>
        </div>
        
    </div><!--first row ends-->

    <div class="rowDiv"> <!--second row starts-->

        <div class="a1">
            <div class="form-group">
                <div class="dropdown-container-skills">
                    <select class="dropdown-skills">
                        <option>Select Any</option>
                        <option value="S1">Skill 1</option>
                        <option value="S2">Skill 2</option>
                        <option value="S3">Skill 3</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="a1">
            <div class="form-group">
                <div class="dropdown-container-topics">
                    <select class="dropdown-topics">
                        <option>Select Any</option>
                        <option value="T1">Topic 1</option>
                        <option value="T2">Topic 2</option>
                        <option value="T3">Topic 3</option>
                    </select>
                </div>
            </div>
        </div>
        
    </div><!--second row ends-->


</div>
 

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

 $('body').on('change', '.dropdown-skills', function(e) {
    $.ajax({
          type: "GET",
          url: 'getTopics/'   $(this).val(),
          dataType : "html",
          success: function(response)
          {
            $(this).closest('.rowDiv').find('.dropdown-container-topics').html(response);

          }
    });
});
 

т. е. когда я изменю класс dropdown-skills , он получит темы в виде html из функции контроллера, а затем будет передан в класс dropdown-container-topics текущей строки.
Но это не работает. Как это можно сделать?