动态添加数据到Framework7智能选择？

Question

我正在尝试将数据动态添加到Framework7中的智能选择中，但我无法做到这一点。

我试着用智能选择做一个过滤器。

我有三个智能选择:汽车品牌，发动机，和数量门。

一旦品牌被选中，下一个智能选择应该被动态填充内容。

如果选择一个发动机，则应动态填充门的数量。

我在动态添加数据时失败了。

我这里有一个jsFiddle：

https://jsfiddle.net/o2ejupu1/669/

 var app = new Framework7({
    root: '#app',
    theme: 'auto',
    smartSelect: {
        pageTitle: 'Select Option',
        openIn: 'popup',
    },
    data: function () {
        return {
            carBrands: ["honda", "bmw", "ford", "vw"]
        };
    },
    methods: {
        createSelect: function () {
            let carsSelect = document.getElementById("cars");
            app.data.carBrands.forEach(addCars);
            carsSelect.innerHTML = carsSelect.innerHTML + "<option value=" + index + ">" + item + "</option>";
        }
    },
    routes: [{
        path: '/about/',
        content: `
        <div class="page">
          <div class="navbar">
            <div class="navbar-inner sliding">
                <div class="left">
                <a href="#" class="link back">
                  <i class="icon icon-back"></i>
                  <span class="ios-only">Back</span>
                </a>
              </div>
              <div class="title">About</div>
            </div>
          </div>
          <div class="page-content">
            <li>
  <a onclick="app.methods.createSelect()" class="item-link smart-select smart-select-init" data-open-in="popup"  data-searchbar="true" data-searchbar-placeholder="Search car">
    <select name="car" id="carsSelect" multiple>
    </select>
    <div class="item-content">
      <div class="item-inner">
        <div class="item-title">Car</div>
      </div>
    </div>
  </a>
</li>
          </div>
        </div>
      `
    }]
});

var viewMain = app.views.create('.view-main');
var smartSelect = app.smartSelect.create({ /* parameters */ });

以前有人做过这样的事吗，还是这里有更好的方法？

Answer 1

我认为您不必使用智能选择自动init，因为它将使用放置在select中的当前select选项初始化，我建议您首先用初始值(cars)填充DOM，然后创建一个智能select，如下所示：

  data: function () {
        return {
            carBrands: ["honda", "bmw", "ford", "vw"]
        };
    },
    methods: {
        createSelect: function () {
            let carsSelect = document.getElementById("cars");
            app.data.carBrands.forEach(addCars);
            carsSelect.innerHTML = carsSelect.innerHTML + "<option value=" + index + ">" + item + "</option>";

            //after creating the DOM then you can call in the create smart-select
           app.smartSelect.create('.smart-select')
        }
    }

注意：在加载时删除模板中的智能选择init类，以便动态初始化选择。