Question

我在Meteor上使用Semantic UI。我的代码中有一些下拉字段等模块。一切都是为了获取数据，但我想清楚下拉，就像我可以清除文本字段，但它不起作用..

有人可以帮我吗？

这是我的代码：

Meteor.subscribe('brands');

Template.deliveryForm.helpers({
    brands: function() {
       return Brands.find({}, {fields: {'brand':1}});
    }
});

Template.deliveryForm.events({
  'submit .new-delivery': function(event) {
    event.preventDefault();

    var date = event.target.date.value;
    var brand = event.target.brand.value;
    var description = event.target.description.value;

    Deliveries.insert({
        date: date,
        brand: brand,
        description: description,
        createdAt: new Date()
    });

    event.target.date.value = "";
    event.target.brand.value = "";
    event.target.description.value = "";
  }
});

Template.deliveryForm.rendered = function(){
  $('select.dropdown').dropdown({ });
}

感谢您的帮助

以下是模板代码：

<template name="deliveryForm">
  <form class="ui form new-delivery">
    <div class="four inline fields">
        <div class="wide three field">
            <label>Date</label>
            <input type="date" name="date" placeholder="Date">
        </div>
        <div class="wide four field">
            <label>Marque</label>
            <select class="ui search dropdown" name="brand">
                <option value="">Selectionner Marque</option>
                {{#each brands}}
                    <option value="{{brand}}">{{brand}}</option>
                {{/each}}
                </select>
        </div>
        <div class="wide eight field">
            <label>Description</label>
            <input type="text" name="description" placeholder="Description">
        </div>
        <button class="ui button icon right labeled teal" type="submit" name="submit"><i class="right checkmark icon"></i>Valider</button>
    </div>
  </form>
</template>

Answer 1

从Semantic UI dropdown docs，您可以通过以下方式清除下拉列表：

Template.deliveryForm.rendered = function(){
  $('select.dropdown').dropdown('clear');
}

希望这有效：）

修改

您的代码和我的示例需要包含在Meteor.defer内（有些引用1，2，3），因为DOM没有准备好执行rendered回调。

Template.deliveryForm.rendered = function(){ Meteor.defer(function() { $('select.dropdown').dropdown('clear'); }); }

希望现在有效：）

Answer 2

我不确定您的功能案例是什么，但我认为在提交表单后，您只想重置下拉列表（选择您的第一个选项）。请尝试以下代码：

Template.deliveryForm.events({
  'submit .new-delivery': function(event) {
    event.preventDefault();

    var date = event.target.date.value;
    var brand = event.target.brand.value;
    var description = event.target.description.value;

    Deliveries.insert({
        date: date,
        brand: brand,
        description: description,
        createdAt: new Date()
    });

    event.target.date.value = "";

    //Below code will restore defaults of your dropdown
    $('.dropdown').dropdown('restore defaults');

    event.target.description.value = "";
  }
});

Answer 3

好的伙计，它似乎有用，但是你的答案都是......这里是代码，但无法解释原因......

Meteor.subscribe('brands');

Template.deliveryForm.helpers({
  brands: function() {
    return Brands.find({}, {fields: {'brand':1}});
  }
});

Template.deliveryForm.events({
 'submit .new-delivery': function(event) {
    event.preventDefault();

    var date = event.target.date.value;
    var brand = event.target.brand.value;
    var description = event.target.description.value;

    Deliveries.insert({
        date: date,
        brand: brand,
        description: description,
        createdAt: new Date()
    });

    event.target.date.value = "";
    $('.dropdown').dropdown('restore defaults');
    event.target.description.value = "";
 }
});

Template.deliveryForm.rendered = function(){
  Meteor.defer(function() {
    $('.dropdown').dropdown('restore defaults');
  });
}

再次感谢：）

流星：清除一个字段

3 个答案: