CODEWITHSUNDEEP
meteormeteor-blaze
Oscar Dulzaides
Oscar Dulzaides

Reputation: 169

How to set option to selected based on collection property

I have a task list in Meteor in which I want to be able to update certain tasks. There is a 'priority' field in the collection. I am able to set the value property in the select tag. What I want is to set as 'selected' the option that matches the value of select tag.

Here is my code in the template:

<select value="{{priority}}"  id="priorityList">
      <option value="Low">Low</
      <option value="Medium" >Medium</option>
      <option value="High">High</option>
</select>

This is code code in the helper:

Template.add_task.helpers({
  update: function() {
    if(Session.get('id')) {
        var id = Session.get('id');
        var task = Items.find({_id: id});
        console.log(task);
        return task;
    }
}

});

I am able to get the data for the fields from the helper but am new to coding and am trying to find a solution to be able to set either "Low", "Medium", or "High" to 'selected' so it will show on the dropdown when I go to update the task.

Thanks for any help that can be provided.

Upvotes: 1

Views: 60

Answers (1)

Faysal Ahmed
Faysal Ahmed

Reputation: 1542

As you have said, priority property of a document will decide which item would get selected in the view by default. You can set another helper to make the tweaks.

<option value="Low" {{ isSelected "Low"}} >Low</option>
<option value="Medium" {{ isSelected "Medium"}} >Medium</option>
<option value="High" {{ isSelected "High"}} >High</option>

Template.add_task.helpers({
    update: function(){//previous code},
    isSelected: function(value){
        var taskPriority = Items.findOne({_id: Session.get('id')}).priority;
        return (taskPriority === value) ? 'selected' : '' ;
    }
});

This is one possible solution. This problem may have a better solution than this. You are welcome to modify the codebse according to your needs.

Upvotes: 2

Related Questions