Populating HTML Select dropdown from a database in Meteor

Question

I've not been able to find the correct answer on this so seeing if the stackOverflow crew can help. I know it seems like a common thing, but this example is a little different from what I've found whilst searching.

I have a meteor template that has a select dropdown in it with the relevant part as such:

    {{#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}}

The complete code for the helper that selectedOrNot is in is shown as such:

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

  }

  });

What I'm trying to do:

I have data stored in a collection called newOrgPhoneNumbers.

This data includes a "type" that has either "Home", "Mobile", "Work", etc in it.

When I draw the select dropdown in the template, I want the selected to be chosen for the option that matches the "type" in the newOrgPhoneNumbers collection. Note that there are multiple select dropdowns, one for each item in the data collection. So there may be say, 6 phone numbers in the form, each with its own ID taken from the collection it's drawn from.

For the purposes of this example, the collection data has "Home" as the "type", so I want it to draw with Home being selected in the select dropdown.

Now I can see what's wrong here. The typeFormName is taking the VALUE of the selector dropdown, which is always "Work" by default.

How can I rework this to make a match in my If condition and return a "selected" when I get a match? I think I need to retrieve a value from the template that matches the value in the collection but the selector dropdown doesn't have such a value (as it's always "work" when drawn).

I've spent about 5 hours today on this with various logic attempts so it's time to ask. Any help is greatly appreciated. Rob

Answer 1

Instead of this

//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';
     }

  }

try this

//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';
     }
  }

make sure you're getting correct values for both by console.log

EDIT

try following code

{{#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}}

in the helpers

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

Answer 2

Huge thanks to @Sasikanth. This is what he's helped me with and it's provided in full below to help others / future reference.

Meteor Template:

{{#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}}

Meteor Helper:

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

  });