Изменение значения поля выбора не может быть применено в метках с использованием ajax и jquery

Question

В Laravel я динамически добавил несколько полей выбора и метки, используя jquery.Значения Select Box поступают из базы данных.При использовании Ajax в зависимости от значений окна выбора значение метки (которое также поступает из базы данных) должно изменяться динамически.Это работает, но все значения меток меняются.Я хочу применять значения для маркировки только для конкретных.Здесь я должен приложить свой код.Заранее спасибо.

Ajax-код для изменения значения поля выбора и применения результатов к метке

$(document).on('change','.mySelect', function() {
     alert(this.value);
    var unit=this.value;

   var me=$(this);
$.ajax({
  type: "get",
  dataType:"json",
  url: "{{URL('newuphist/findunit')}}",
  data:{unit:unit},
  success: function(data){

   me.closest('.mySelect').find("#unitlbl").html(data['unit']);

  },

  error:function(){
   me.closest('.mySelect').find("#unitlbl").html("Error");

  }



});

HTML-код

    <div class="select">

     <select  class="mySelect" name="cat[]" >


        @foreach($data as $item)
           @component('compnew')
              @slot('opt')
               {{$item->diseaseName}}

               @endslot
            @endcomponent

        @endforeach

     </select> &nbsp &nbsp

    @component('comptxt')

    @endcomponent 
    &nbsp &nbsp

      @if(isset($res))

         <label   id="unitlbl" >{{$res}}</label>
         @else
            <label   id="unitlbl"></label>


    @endif     

  <br/>
</div>
</div>

Answer 1

Вы должны добавить метку в том же поле выбора.

 e.g
   <div class="select"> 
    <select class="mySelect">
         //code
    </select>
    <label id="myLabel"></label>
   </div>

jquery-код, такой как

 $(document).on('change','.mySelect', function() {
    alert(this.value);
   var unit=this.value;

var me = $(this); // add this 

$.ajax({
  type: "get",
  dataType:"json",
  url: "{{URL('newuphist/findunit')}}",
  data:{unit:unit},
  success: function(data){
        me.closest('.select').find("#myLabel").html(data['unit']);

  },

  error:function(){

$(".unitlbl").html("not get");   

  }

});

Это будет работать для вас, дорогой.

Answer 2

Попробуйте:

$(document).on('change','select', function() {
    var lbl = $(this).parents('div.select').find('#unitlbl');
    /* TO DO */
});

и используйте lbl.html() или lbl.text() для обновления текста.