CODEWITHSUNDEEP
meteor
MChan
MChan

Reputation: 7162

Meteor select element setting selected value

Inside my Meteor js app I have the select element shown below inside a form where I need to check and display selected value upon loading the form, I tried researching on how to do so in Meteor but couldn't find any info, so can someone please tell me how I can check which of the options is selected to make this option as a selected option? Thanks for your help

            <select name="memberType" class="form-control">
              <option value="Member">Member</option>
              <option value="Admin">Admin</option>
              <option value="Visitor">Visitor</option>                
            </select>

Upvotes: 1

Views: 1794

Answers (1)

saimeunt
saimeunt

Reputation: 22696

You can use these universal helpers :

JS

Template.registerHelper("checkedIf",function(value){
  return value?"checked":"";
});

Template.registerHelper("selectedIfEquals",function(left,right){
  return left==right?"selected":"";
});

HTML

<template name="myTemplate">
  <input type="checkbox" {{checkedIf checked}}>
  <select>
    {{#each options}}
      <option value={{value}} {{selectedIfEquals value ../valueCheckedAgainst}}>
        {{text}}
      </option>
    {{/each}}
  </select>  
</template>

They are intended to be used with correctly set template data contexts :

Template.myTemplate.helpers({
  checked:function(){
    // return a Session variable or a value from a collection
    // dummy value
    return false;
  },
  options:function(){
    return [{
      value:"value1",
      text:"First value"
    },{
      value:"value2",
      text:"Second value"
    },{
      value:"value3",
      text:"Third value"
    }];
  },
  valueCheckedAgainst(){
    // return a Session variable or a value from a collection
    // dummy value
    return "value2";
  }
});

Note the use of the ../parentContext syntax to access valueCheckedAgainst from parent data context inside the {{#each}} block.

Upvotes: 3

Related Questions