Как самостоятельно заполнить поле выбора, используя ajax

Question

Я снова здесь, я работаю над проектом, который мне нужно сделать ajax в другом, чтобы заполнить поле выбора города лучше всего в поле выбора штата. Моя работа с кодом работает, но если я добавлю еще одно поле выбора с теми же деталями, он будет слушать только первый выбор состояния, а затем заполнить поле выбора первого и второго города.

Пожалуйста, вот что я имею в виду ...

Поле выбора отправителя

<section>
    <div class="col col-md-6">
      <div class="form-group">
       <label  class="required">Sender State</label>
          <select class="state form-control" required>
              <option selected disabled>Select State</option>
           </select>
       </div>
     </div>

 <div class="col col-md-6">
   <div class="form-group">
    <label  class="required">Sender City</label>
     <select class="city form-control" required>
      <option selected disabled>Select City</option>
      </select>
    </div>
 </div>

Теперь у меня также есть поле выбора получателя

<section>
    <div class="col col-md-6">
      <div class="form-group">
       <label  class="required">Receiver State</label>
          <select class="state form-control" required>
              <option selected disabled>Select State</option>
           </select>
       </div>
     </div>

 <div class="col col-md-6">
   <div class="form-group">
    <label  class="required">Receiver City</label>
     <select class="city form-control" required>
      <option selected disabled>Select City</option>
      </select>
    </div>
 </div>

Итак, мой ajax, который я загружаю до конца

Это первый ajax, заполняет поле выбора состояния ...

 $.ajax({
    type: "get",
    url: "/state",
    success: function (res) {
        if (res) {
            $.each(res,function(key,value){
                $(".state").append('<option value="'+value+'">'+value+'</option>');
            });
        }
    }
});

Здесь проблема начинается со второго ajax

 $('.state').change(function(){
        var cid = $(this).val();
        if(cid){
            $.ajax({
                type:"get",
                url:"/city/"+cid,
                success:function(res)
                {
                    if(res)
                    {
                        $('.city').empty();
                        $('.city').append('<option>Select State</option>');
                        $.each(res,function(key,value){
                            $('.city ').append('<option value="'+value+'">'+value+'</option>');
                        });
                    }
                }

            });
        }
    });

Теперь, когда я выбираю «поле выбора отправителя», город отправителя заполняется вместе с городом получателя ... Пожалуйста, как я могу сделать получателя город, который будет заселен, только если выбрано состояние получателя?

Answer 1

Вы можете добавить отправителя и класс получателя в поля выбора, вы можете использовать этот вызов, чтобы определить, какие поля выбора вам нужно обновить.

 <div class="col col-md-6">
   <div class="form-group">
    <label  class="required">Receiver City</label>
     <select class="city receiver form-control" required>
      <option selected disabled>Select City</option>
      </select>
    </div>
 </div>
<div class="col col-md-6">
   <div class="form-group">
    <label  class="required">Sender City</label>
     <select class="city sender form-control" required>
      <option selected disabled>Select City</option>
      </select>
    </div>
 </div>

$('.state').change(function(){
        var cid = $(this).val();
        if(cid){
            $.ajax({
                type:"get",
                url:"/city/"+cid,
                context: this,
                success:function(res)
                {
                    if(res)
                    {
                        var selector = '.city.'+$(this).is('.sender')?'sender':'receiver';
                        var $city = $(selector).empty();
                        $city.append('<option selected disabled>Select City</option>');
                        $.each(res,function(key,value){
                            $city.append('<option value="'+value+'">'+value+'</option>');
                        });
                    }
                }

            });
        }
    });