如何在编辑模式下选择依赖下拉列表

Question

我在更新表单时遇到问题。在这种形式下，我从DB中获取结果并显示值。有城市和地区依赖的下拉。我获取城市比较和选择值显示，但相同方式依赖下拉平均值下拉列表不会填充。看守则。

<div class="col-md-3">
    <label for="enq_city">City<span class="red">*</span></label>
    <?php if (isset($cities) && !empty($cities)) { ?>

            <select required="" class="form-control" id="enq_city" name="enq_city">
                <option value="">Choose City</option>
                   <?php foreach ($cities as $city) { 
                       if($city->city_id == $result[0]->enq_city) {
                           $selected = "selected";?>

                <option <?php echo $selected ?> value="<?php echo $city->city_id; ?>">
<?php echo $city->city_name; ?></option>                
                    <?php } ?>       
                    <?php } ?>       
            </select>
    <?php } ?>
</div>
<div class="col-md-3">
    <label for="enq_locality">Locality<span class="red">*</span></label>
    <select required="" class="form-control" id="enq_locality" name="enq_locality">

    </select>
</div>

我的Ajax代码

<script type="text/javascript">
$(document).ready(function() { 
    $('select[name="enq_city"]').on('change', function() {
        var cityId = $(this).val();
        alert(cityId);
        if(cityId) {
            $.ajax({
                url: 'getLocality/'+cityId,
                type: "GET",
                dataType: "json",
                success:function(data) {
                    $('select[name="enq_locality"]').empty();
                    $.each(data, function(key, value) {
                        $('select[name="enq_locality"]').append('<option value="'+ value.locality_id +'">'+ value.locality_name +'</option>');
                    });
                }
            });
        }else{
            $('select[name="enq_locality"]').append('<option value="">No Locality Found</option>');
        }
    });
});

Answer 1

根据我在您的问题中可以理解的内容，您似乎以某种方式刷新此页面（用于“编辑”）并从数据库中提取数据并期望从负载中显示值。

如果是这种情况，那么你在加载页面时没有看到任何内容的原因是因为你只是加载了选择的“on change”数据 - 并且当页面被加载时，没有'改变' - 它只是加载，所以JS永远不会激活。

获取加载数据的一种简单方法是修改你的JS ......

<script type="text/javascript">
$(document).ready(function() { 
    // pull the AJAX out to a function that can be used later
    function call_ajax(cityId){
         if(cityId){
             $.ajax({
                url: 'getLocality/'+cityId,
                type: "GET",
                dataType: "json",
                success:function(data) {
                    $('select[name="enq_locality"]').empty();
                    $.each(data, function(key, value) {
                        $('select[name="enq_locality"]').append('<option value="'+ value.locality_id +'">'+ value.locality_name +'</option>');
                    });
                }
             });
         }else{
             $('select[name="enq_locality"]').append('<option value="">No Locality Found</option>');
         }
    }

    $('select[name="enq_city"]').on('change', function() {
        var cityId = $(this).val();
        alert(cityId);
        call_ajax(cityId);
    });
    // now, we make sure that 'enq_locality' is populated on loading the page
    // NOTE:  this presumes that $city->city_id exists 
    // from the example code it is also presumed so not checked here
    call_ajax("<?php echo $city->city_id; ?>"); 
});

代码是未经测试的（因为你没有给出一个完整的例子来测试.....）但是应该给出一些关于至少一种获取页面加载数据的方法的想法。

如果我不理解这个问题，请提供更多代码，并详细说明它究竟发生了什么。