Question

我使用的是MVC结构，这里是JQuery：

<script type="text/javascript">
    $('select[name="provider_id"]').change(function() {
        var provider_id = $(this).val();

        if (provider_id) {

            $.ajax({
                    url: url + '/ProductsAjax/GetOutletByProvider',
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        provider_id: provider_id
                    },
                })
                .done(function(data) {
                    $.each(data, function(index, item) {
                        var outlets = "<option value='" + item.id + "'>" + item.outlet_name + "</option>";
                        $('select[name="outlet"]').append(outlets);
                        console.log(item.id + ' ' + item.outlet_name);
                    })

                })

                .fail(function(jqXHR, textStatus, errorThrown) {
                    console.log(textStatus + ': ' + errorThrown);
                    console.warn(jqXHR.responseText);
                });

        } else {

            $('select[name="outlet"]').empty();
        }
    });
</script>

它在控制台中输出正确的数据，但下拉菜单本身根本不显示数据。没有任何事情发生。

以下是选择菜单：

<div class="form-group m-form__group">
        <label for="example_input_full_name">
            Select Service Provider
        </label>
        <select class="form-control m-bootstrap-select m_selectpicker" name="provider_id">
            <option value="">Select Service Provider</option>
            <?php foreach($data['sproviders'] as $service_provider): ?>
                <option value="<?php echo $service_provider->service_provider_id; ?>"><?php echo $service_provider->sp_name; ?></option>
            <?php endforeach; ?>
        </select>
    </div>
<div class="form-group m-form__group">
       <label for="example_input_full_name">
           Select Outlet
       </label>
        <select class="form-control m-bootstrap-select m_selectpicker" name="outlet" id="outlet">
        </select>
</div>

由于正确的数据显示在控制台中，我无法弄清楚为什么它没有进入第二个选择菜单。

控制台数据：

108 Branch One
109 Branch Two
110 Branch Three

Answer 1

<script type="text/javascript">
    $('select[name="provider_id"]').change(function() {
        var provider_id = $(this).val();

        if (provider_id) {

            $.ajax({
                    url: url + '/ProductsAjax/GetOutletByProvider',
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        provider_id: provider_id
                    },
                })
                .done(function(data) {
                    var outlets="";
                    $.each(data, function(index, item) {
                        outlets += "<option value='" + item.id + "'>" + item.outlet_name + "</option>";  // concat all options                      
                        console.log(item.id + ' ' + item.outlet_name);
                    })
                    $('select[name="outlet"]').html(outlets); // add all options

                })

                .fail(function(jqXHR, textStatus, errorThrown) {
                    console.log(textStatus + ': ' + errorThrown);
                    console.warn(jqXHR.responseText);
                });

        } else {

            $('select[name="outlet"]').empty();
        }
    });
</script>

依赖下拉菜单使用ajax不刷新，但控制台显示数据

1 个答案: