从Meteor中的数据库填充HTML Select下拉列表

Question

我还没有找到正确的答案，所以看看stackOverflow的工作人员是否可以提供帮助。 我知道这似乎很普通，但是此示例与我在搜索时发现的示例有所不同。

我有一个流星模板，其中有一个选择下拉列表，其中包括相关部分：

    {{#each phoneNumber}} 
        <li>
            <input id="{{this._id}}" type="text" name="phoneNumberItem" placeholder="Phone number here"  value="{{number}}">
            <select id="{{this._id}}" name="type">
            <!-- go through collection and see which is selected there, mark it as selected here so they match -->
                <option selected="{{selectedOrNot}}" name="selection">Work</option>
                <option selected="{{selectedOrNot}}" name="selection">Home</option>
                <option selected="{{selectedOrNot}}" name="selection">Mobile</option>
                <option selected="{{selectedOrNot}}" name="selection">Office</option>
                <option selected="{{selectedOrNot}}" name="selection">Fax</option>
                <option selected="{{selectedOrNot}}" name="selection">Other</option>
            </select>
            <input id="{{this._id}}" type="button" class="remove" value="X">
        </li>
    {{/each}}

selectedOrNot所在的帮助程序的完整代码如下所示：

  Template.addPhoneNumber.helpers({

    //the full list of phone numbers in the collection, so we can loop through them in the template and draw them into the form
    'phoneNumber': function() {
      return newOrgPhoneNumbers.find();
    },


    //let's us choose which of the dropdown items are selected
    'selectedOrNot': function(event){

      var collectionType = newOrgPhoneNumbers.findOne();  //get the type from the collection (EG: Home, Mobile, Fax, etc)
      var typeFormName = $('[name="selection"]').val();   //get the data from the form (EG: Home, Mobile, Fax, etc)


      //When drawing the select dropdown, see if there's a match and return selected if so
     if(collectionType.type === typeFormName){
      console.log ('selected!');
      return 'selected';
     }

  }

  });

我正在尝试做的是：

我将数据存储在名为newOrgPhoneNumbers的集合中。

该数据包括其中具有“家庭”，“移动”，“工作”等的“类型”。

当我在模板中绘制选择下拉列表时，我希望为与newOrgPhoneNumbers集合中的“类型”匹配的选项选择选定的内容。 请注意，有多个选择下拉列表，数据收集中的每个项目都有一个。 因此，可以说，表格中有6个电话号码，每个电话号码都有自己的ID，该ID均来自其提取的集合。

出于本示例的目的，收集数据将“ Home”作为“类型”，因此我希望在选择下拉列表中选择Home的情况下进行绘制。

现在，我可以看到这里出了什么问题。 typeFormName使用选择器下拉列表的VALUE，默认情况下始终为“工作”。

我该如何重做以在If条件中进行匹配，并在获得匹配项时返回“ selected”？ 我认为我需要从模板中检索与集合中的值匹配的值，但选择器下拉列表没有这样的值（因为绘制时它始终是“工作的”）。

今天，我已经花了大约5个小时来进行各种逻辑尝试，所以该问一下了。 任何帮助是极大的赞赏。 抢

Answer 1

代替这个

//let's us choose which of the dropdown items are selected
    'selectedOrNot': function(event){

      var collectionType = newOrgPhoneNumbers.findOne();  //get the type from the collection (EG: Home, Mobile, Fax, etc)
      var typeFormName = $('[name="selection"]').val();   //get the data from the form (EG: Home, Mobile, Fax, etc)


      //When drawing the select dropdown, see if there's a match and return selected if so
     if(collectionType.type === typeFormName){
      console.log ('selected!');
      return 'selected';
     }

  }

尝试这个

//let's us choose which of the dropdown items are selected
    'selectedOrNot': function(event){
      var typeFormName = $('[name="selection"]').val();   //get the data from the form (EG: Home, Mobile, Fax, etc)


      //When drawing the select dropdown, see if there's a match and return selected if so
     if(this.type === typeFormName){
      console.log ('selected!');
      return 'selected';
     }
  }

确保通过console.log获得正确的值

编辑

尝试以下代码

{{#each phoneNumber}} 
        <li>
            <input id="{{this._id}}" type="text" name="phoneNumberItem" placeholder="Phone number here"  value="{{number}}">
            <select id="{{this._id}}" name="type">
            <!-- go through collection and see which is selected there, mark it as selected here so they match -->
                <option value="Work">Work</option>
                <option value="Home">Home</option>
                <option value="Mobile">Mobile</option>
                <option value="Office">Office</option>
                <option value="Fax">Fax</option>
                <option value="Other">Other</option>
            </select>
            {{setDropdownValue}}
            <input id="{{this._id}}" type="button" class="remove" value="X">
        </li>
    {{/each}}

在帮手中

setDropdownValue: function(){
 $("#"+this._id).val(this.type);
}

Answer 2

非常感谢@Sasikanth。 这就是他为我提供的帮助，下面提供了全文，以帮助他人/将来参考。

流星模板：

{{#each phoneNumber}} 
        <li>
            <input id="{{this._id}}" type="text" name="phoneNumberItem" placeholder="Phone number here"  value="{{number}}">
            <select id="sel_{{this._id}}" name="type">
            <!-- go through collection and see which is selected there, mark it as selected here so they match -->
                <option value="Work">Work</option>
                <option value="Home">Home</option>
                <option value="Mobile">Mobile</option>
                <option value="Office">Office</option>
                <option value="Fax">Fax</option>
                <option value="Other">Other</option>
            </select>
            {{setDropdownValue}}
            <input id="{{this._id}}" type="button" class="remove" value="X">
        </li>
    {{/each}}

流星助手：

  Template.addPhoneNumber.helpers({

    //the full list of phone numbers in the collection, so we can loop through them in the template and draw them into the form
    'phoneNumber': function() {
      return newOrgPhoneNumbers.find();
    },

    //This will take the value of the database item's "type" field and send it back to the select html element.  
    //It's using the sel_ prefix to separate it from the other items with the same id in the template so they don't receive the data by accident.
    'setDropdownValue': function(){
     $("#sel_"+this._id).val(this.type);
    }

  });