Question

一旦我使用class =“selectpicker”，我就无法在select中加载下拉值。

因此，为了加载类别值，我添加了脚本

$('.selectpicker').selectpicker();
//replaced i < 10 with i < Object.keys(e).length
for (var i = 0; i < Object.keys(e).length; i++) {
    var o = new Option(e[i].name, e[i].name);
    $(".selectpicker").append(o);
}
$(".selectpicker").selectpicker('refresh');

现在，我可以加载类别下拉列值，但也会为服务加载相同的下拉列值。我怀疑的是，我如何为服务编写另一个selectpicker函数。

我的HTML代码是

<form action="" class="form-inline" onsubmit="return false;" method="post" id="categories">
    <fieldset>
        <div class="row">
            <div class="col-xs-6">
                <select id="lunchBegins" class="selectpicker" data-live-search="true" data-live-search-style="begins" title="Select Your City" v-model="category" name="category">
                    <option v-for="post in articles" v-bind:value="post.name">{{post.name}}</option>
                </select>
            </div>
            <div class="col-xs-6">
                <select id="basic" class="selectpicker show-tick form-control" v-model="subcategory" name="subcategory">
                    <option v-for="so in services" v-bind:value="so.name">{{so.name}}</option>
                </select>
            </div>
        </div>
    </fieldset>
</form>

我的视图js加载脚本是

<script>
    categories = new Vue({
        el: '#categories',
        data: {
            articles: [],
            services: [],
            category: 0,
            subcategory: 0,
        },
        watch: {
            subcategory: function (e) {
                this.prefetch();
            },
            category: function () {
                var self = this;
                self.subcategory = 0;
                $.ajax({
                    url: "https://n2s.herokuapp.com/api/post/get_all_services/",
                    data: {
                        'service': self.id
                    },
                    type: "POST",
                    dataType: "JSON",
                    success: function (e) {
                        console.log('Loading services');
                        console.log(self.category);
                        let categoryIdArray = self.articles.filter(x=>x.name == self.category);
                        console.log(categoryIdArray);
                        self.services = e.filter(x=>x.cat_id == categoryIdArray[0].cat_id);
                        self.prefetch();
                    }
                });
            },
        },

        mounted() {
            var vm = this;
            $.ajax({
                url: "https://n2s.herokuapp.com/api/post/get_all_category/",
                method: "GET",
                dataType: "JSON",
                success: function (e) {
                    console.log(e);
                    $('.selectpicker').selectpicker();
                    //replaced i < 10 with i < Object.keys(e).length
                    for (var i = 0; i < Object.keys(e).length; i++) {
                        var o = new Option(e[i].name, e[i].name);
                        $(".selectpicker").append(o);
                    }
                    $(".selectpicker").selectpicker('refresh');
                    vm.articles = e;
                    console.log(vm);
                },
            });
        },
    })
</script>

有人可以帮我解决问题..这几天我支持这个问题..如何获得服务的下拉列表呢？当我删除class = selectpicker时，我也能够为服务加载正确的下拉列表。那么，当我使用class =“selectpicker”

时，如何解决问题呢？

Selectpicker类会给我带来问题吗？

0 个答案: