Meteor dependent select

help
1

I need to implement 2 dependent selects in my meteor app. I am new with web development in general and very new with meteor. However I have done something that works but I would like to know if that is the correct way or if there is any other better way to do it. Why I am wondering this is because I have seen some code on the web which I can understand very well yet so I prefer to do it as I think it should be.

The selects are one with car brands and the second one with the models of the selected brand.

I am using the Session in meteor 1.3 (although I’ve read a little bit that there is something call reactive vars which can be used as well).

Please do not take into account security issues for now. Also notice that the template is just the fragment related to this topic.

Thanks in advance.

Here is my code:

const VEHICLE_MODELS = "vehicleModels";

function setVehicleModels(vehicleModels){
    Session.set(VEHICLE_MODELS, vehicleModels);    
}

function getVehicleModels(){
    return Session.get(VEHICLE_MODELS);    
}

Template.startJob.events({
    'change #carBrands': function(e){
        e.preventDefault();

        var selectedBrand = $("#carBrands").val();
        var vehicleData = Vehicles.findOne({"make":selectedBrand})
        setVehicleModels(vehicleData.models);        
    }
});

Template.startJob.helpers({
    carBrands(){
        return Vehicles.find();
    },
    carModels(){
        return getVehicleModels();        
    }    
});

<div class="form-group">
                        <label for="carBrands" class="col-sm-2 control-label">
                            Make
                        </label>
                        <div class="col-sm-10">
                            <select id="carBrands" class="form-control select2">
                                <option value="">Select a brand...</option>
                                {{#each carBrands}}
                                    <option value="{{make}}">{{make}}</option>
                                {{/each}}                                
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="carModels" class="col-sm-2 control-label">
                            Model
                        </label>
                        <div class="col-sm-10">
                            <select id="carModels" class="form-control select2">
                                <option value="">Select a model...</option>
                                {{#each carModels}}
                                    <option value="{{this}}">{{this}}</option>
                                {{/each}}                                
                            </select>
                        </div>
                    </div>