In meteor js ,In edit form i'm unable to display the dropdown box values which i stored during adding a form

Question

I have a form that uses drop-down boxes to save information in mongo Db. That works fine, but the problem comes when I am trying to edit the information in the database.I used the same form (add form) to edit the information. it pulls the values from the database and displays the fields in the fields accordingly. However, I am having a hard time figuring out how to populate the drop-down boxes with the value from the database. Basically, I want the "option selected" tag to be the database and be able to still have the rest of the options to select from.in text box I am getting the text values from database but in drop down I wont be able to get the value.

       addmenu.html
    <template name="addMenu">
      <form class="addingMenus">
        <p><input type="text" name="menuName" id="menuName" placeholder="Choose Label" value = {{menuName}}></p>
        <p><input type="text" name="associatedPages" id="associatedPages" placeholder="Enter Associated Pages" value= {{associatedPages}}></p>
        <p><input type="text" name="menuUrl" id="menuUrl" placeholder="Enter Page URl" value={{menuUrl}}></p>
        <p>
          <select id="level" >
            <option name="parent"  value="0" selected = {{rejected}}>parent level</option>
            <option name="child" value="1" selected = {{accepted}}>child level</option>
          </select>

          <select id="childLevel" style="visibility:hidden">
            {{#each parent}}
            <option value = "{{this._id}}" selected = {{subMenu}} >{{this.menuName}}</option>
            {{/each}}
          </select>
        </p> 
        <p>
          <select id="publishStatus">
            <option name="publish" value="true" selected="{{published}}">publish</option>
            <option name="unpublish" value="false" selected="{{unpublished}}">unpublish</option>
          </select>
        </p>
        <p><button type="button"  class="save-button" id="{{task}}-save-button">SAVE</button></p>
      </form>
    </template>



    addmenu.js:



    Template.addMenu.events({
      'click #add-menu-save-button': function (event,template) {
        //event.preventDefault();
        console.log(event);
        var levelId = document.getElementById('level').value;
        if (levelId == 1) {
          parentId = document.getElementById('childLevel').value; 
        } else {
          parentId = "null";
        } 
        var publishStatus = document.getElementById('publishStatus').value;
        //console.log(publishStatus);
        let menuInsert = {
          menuName: document.getElementById('menuName').value,
          associatedPages: document.getElementById('associatedPages').value,
          menuUrl: document.getElementById('menuUrl').value,
          level: document.getElementById('level').value,
          createdAt: new Date(),
          publishStatus: publishStatus,
          parentId: parentId
        };
        Meteor.call("addMenu", menuInsert, function (error, result) {
          if(error) {
            console.log("error in adding a menu");
          } else {
            alert("successfully entered in database");
            Router.go('/administrator/admin');
          } 
        }); 
      },
      'click #level': function (event, template) {
        event.preventDefault();
        console.log(document.getElementById('level').value);
        if(document.getElementById('level').value == '1') {
          document.getElementById("childLevel").style.visibility = "visible";
          console.log("iam in session in level");
        } else {
          document.getElementById("childLevel").style.visibility = "hidden";
        }
      }
    });



    Template.addMenu.helpers({
      parent: function () {
        return menuDetails.find({level: "0"});
      },
      accepted: function (event) {
        console.log(this.level);
        if(this.level == "1") {
          Session.set('submenu',this.parentId);
          console.log(Session.get('submenu'));
          return "selected";
        }
      },
      rejected: function (event) {
        if(this.level == "0") {
          return "selected";
        }
      },
      subMenu: function (event) {
        var id = Session.get('submenu');
        console.log(this._id);
        if(id == this._id) {
          return "selected";
        }
      },
      published: function (event) {
        if(this.publishStatus == true) 
          return "selected";
      },
      unpublished: function (event) {
        if(this.publishStatus == false) 
          return "selected";
      }
    });

Answer 1

you need to modify your template like this.

<select id="childLevel" style="visibility:hidden">

{{#each parent}}
    <option {{isSelected this.menuName}} value = "{{this._id}}">{{this.menuName}}</option>
{{/each}}

</select>

then in the helper you need to write this custom helper.

Template.addMenu.helpers({
isSelected: function(menuName){
   return (menuName == 'your conditional value here') ? 'selected': '';
}
});