Question

我正在尝试将数据动态添加到Framework7中的Smart select，但是无法正常工作。

我正在尝试使用智能选择进行过滤。

我有3个明智的选择：汽车品牌，发动机和车门数量。

一旦选择了品牌，下一个智能选择就应动态填充内容。

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

我无法动态添加数据。

我在这里有一个jsFiddle：

 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

我认为您不必使用智能选择自动初始化，因为它将使用当前放置在选择中的选择选项进行初始化，我建议您首先使用初始值（汽车）填充DOM，然后创建像这样的聪明选择：

  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')
        }
    }

NB：在加载后删除模板中的smart-select-init类，以便您即时初始化选择

将数据动态添加到Framework7 Smart select吗？

1 个答案: