我正在尝试进行动态下拉，但似乎 ajax 无法正常工作/运行答案

【问题标题】：I'm trying to do dynamic dropdown but it seems that ajax is not working/running我正在尝试进行动态下拉，但似乎 ajax 无法正常工作/运行
【发布时间】：2019-06-07 12:50:09
【问题描述】：

我正在尝试使用包含菲律宾位置的表单进行动态下拉，就像这样选择城市 -> 然后根据您选择的城市显示描笼涯数据。

我在运行 ajax 时遇到问题，它似乎在到达 $ajax 的那一刻就停止了。

我已经在if (city) 之前和if (city) 内尝试过alert (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 是否正在运行，但它假设一旦通过下拉列表选择了城市（菲律宾的一个行政区划，类似于村庄或区）

【问题讨论】：

你检查控制台是否有错误。
这里有错误<script> src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>jquery is not loaded
它不会“停在那里”，它必须做某事。是时候进一步使用浏览器的调试工具了。开发控制台上有什么东西吗？在浏览器调试器的网络选项卡中，是否发出了 AJAX 请求？服务器的响应是什么？将error 回调添加到$.ajax() 操作。在浏览器调试器的两个回调中放置一个断点。调用了哪一个？
@MasivuyeCokile 哎呀只是注意到了
@RynxHynx：那么发生了什么？这是怎么失败的？现在是继续探索浏览器调试工具的理想时机。发出的 HTTP 请求是什么？服务器的响应是什么？当您在回调函数中放置调试断点时，会调用哪一个？当您在浏览器的调试器中单步执行它时会发生什么？您需要提供有关问题的信息。另请注意，问题中的任何内容都没有针对您所做的更改进行更新。该问题仍然在您的 <script> 元素中显示一个简单的印刷错误。

标签： javascript php jquery ajax codeigniter

【解决方案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>

【讨论】：