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的集合中。

此数据包含一个“类型”，其中包含“Home”，“Mobile”，“Work”等。

当我在模板中绘制选择下拉列表时，我希望选择与newOrgPhoneNumbers集合中的“type”匹配的选项。请注意，有多个选择下拉列表，一个用于数据集合中的每个项目。所以可以说，表格中有6个电话号码，每个电话号码都有自己的ID，取自它的抽取。

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

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

如何在我的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">  <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);
    }

  });

填充HTML选择Meteor中数据库的下拉列表

2 个答案: