Я пытаюсь сделать динамический выпадающий, но кажется, что AJAX не работает / работает

Question

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

У меня проблемас запуском ajax, похоже, что в тот момент, когда он достигает $ajax, он останавливается там.

Я уже пробовал alert (city) до if (city) и в if (city), и это работает, показывает предупреждение.Я попытался поместить alert(city) или alert(error) в ajax, но ничего не появилось, поэтому я пришел к выводу, что ajax вообще не работает (если мой синтаксис неверен)

<script> src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="input-field col s6">
    <select name="barangay"  id="barangay">
        <option value="" disabled selected>Choose a Barangay</option>
    </select>
    <label for="barangay">Barangay</label>
    <?php echo form_error('barangay');  //------------------------------------------------?>
</div>

<div class="row">
    <div class="input-field col s6">
        <select name="city" id="city">
          <option value="" disabled selected>Choose a City</option>
          <?php
          foreach ($cities as $city)
          {
            echo '<option value="'.$city->city.'">'.$city->city.'</option>';
          }
          ?>
        </select>
        <label for="city">City</label>
        <?php echo form_error('city');  //--------------------------------------------------?>
    </div>
</div>

$(document).ready(function(){
    /* Populate data to state dropdown */
    $('#city').on('change',function(){
        var city = $(this).val();
        //alert(city);
        if(city){
            $.ajax({

                type:'POST',
                url:'index.php/createPatient/getphilippineLocations',
                data:'country_id='+city,
                success:function(data){
                    $('#barangay').html('<option value="">Select State</option>');
                    var dataObj = jQuery.parseJSON(data);
                    if(dataObj){
                        $(dataObj).each(function(){
                            var option = $('<option />');
                            option.attr('value', this.name).text(this.name);           
                            $('#barangay').append(option);
                        });
                    }else{
                        $('#barangay').html('<option value="">State not available</option>');
                    }
                }
            });
        }else{
            $('#barangay').html('<option value="">Select country first</option>');
        }
    });
});

//this is the function it is suppose to call
public function getphilippineLocations()
{
    $states = array();
    $country_id = $this->input->post('country_id');
    if($country_id)
    {
        $states = $this->createPatient_model->getAllBarangays($country_id);
    }
    echo json_encode($states);
}

function getAllBarangays($city)
{
    $sql = "SELECT * FROM ph_locations WHERE city = '".$city."' ORDER BY name ASC";
    $query = $this->db->query($sql);
    return $query->result();
}

К сожалению, нет сообщения об ошибке, я не могу сказать, работает ли ajax, но он предполагает показать все барангайсы для этого города, как только город будет выбран в раскрывающемся списке (административное деление на Филиппинах, аналогично деревнеили район)

Answer 1

Надеюсь, что ниже будет полезно для вас .. попробуйте один раз и дайте нам знать, если это не сработает

  <select name="barangay"  id="barangay">
         <option value="" disabled selected>Choose a Barangay</option>
  </select>

var UrlCities = url Чтобы получить города, BindDropDownValues ​​(UrlBindBenefitPlans, 'barangay', 'ID ',' Name ', true, selectedValueInEditMode);

function  BindDropDownValues(url, controlToBind, dataValueField, dataTextField, isSelectRequired, valueToSelect) {

    var ajax = $.ajax({
        cache: false,
        url: url,
        dataType: "json",
        global: globalAjax,
        success: function (data) {
            if (data != null && data != undefined && data.length > 0) {
                $("#" + controlToBind).empty();
                if (isSelectRequired == true) {
                    $("#" + controlToBind).append($("<option title=\"-Select-\"></option>").val(0).html("--Select--"));
                }

                for (var itemIndex = 0; itemIndex < data.length; itemIndex++) {
                    var singleObj = data[itemIndex];
                    $("#" + controlToBind).append($("<option></option>").val(singleObj[dataValueField]).html(singleObj[dataTextField]));
                }
                if (valueToSelect != undefined && valueToSelect != "") {
                    $("#" + controlToBind).val(valueToSelect);
                }
            }
        }
    });

    return ajax;
};

</script>