title: Populating HTML Select dropdown from a database in Meteor
body: <p>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.</p>
  
  <p>I have a meteor template that has a select dropdown in it with the relevant part as such:</p>
  
  <pre><code>    {{#each phoneNumber}} 
          &lt;li&gt;
              &lt;input id="{{this._id}}" type="text" name="phoneNumberItem" placeholder="Phone number here"  value="{{number}}"&gt;
              &lt;select id="{{this._id}}" name="type"&gt;
              &lt;!-- go through collection and see which is selected there, mark it as selected here so they match --&gt;
                  &lt;option selected="{{selectedOrNot}}" name="selection"&gt;Work&lt;/option&gt;
                  &lt;option selected="{{selectedOrNot}}" name="selection"&gt;Home&lt;/option&gt;
                  &lt;option selected="{{selectedOrNot}}" name="selection"&gt;Mobile&lt;/option&gt;
                  &lt;option selected="{{selectedOrNot}}" name="selection"&gt;Office&lt;/option&gt;
                  &lt;option selected="{{selectedOrNot}}" name="selection"&gt;Fax&lt;/option&gt;
                  &lt;option selected="{{selectedOrNot}}" name="selection"&gt;Other&lt;/option&gt;
              &lt;/select&gt;
              &lt;input id="{{this._id}}" type="button" class="remove" value="X"&gt;
          &lt;/li&gt;
      {{/each}}
  </code></pre>
  
  <p>The complete code for the helper that selectedOrNot is in is shown as such:</p>
  
  <pre><code>  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';
       }
  
    }
  
    });
  </code></pre>
  
  <p>What I'm trying to do:</p>
  
  <p>I have data stored in a collection called newOrgPhoneNumbers.</p>
  
  <p>This data includes a "type" that has either "Home", "Mobile", "Work", etc in it.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>Now I can see what's wrong here.  The typeFormName is taking the VALUE of the selector dropdown, which is always "Work" by default.  </p>
  
  <p>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).</p>
  
  <p>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</p>