从 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 采用选择器下拉列表的值，默认情况下始终为“工作”。

我怎样才能修改它以在我的 If 条件中进行匹配并在我得到匹配时返回“已选择”？我想我需要从模板中检索一个与集合中的值匹配的值，但选择器下拉列表没有这样的值（因为它在绘制时总是“工作”）。

我今天花了大约 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);
    }

  });