<div class="box box-success box-solid ">
    <div class="box-header with-border">
        <h3 class="box-title">Información del Plan</h3>
        <div class="box-tools pull-right">
            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
        </div>
    </div>
    <div class="box-body">
        <div class="row">
            <div class="col-md-12 ">
                <div class="col-md-12 ">
                    <div class="form-group">
                        <label for="planes">Plan</label>
                        <select  class="form-control select2" style="width: 100%;" name="planID" id="planID">
                            {% for plan in planes %}
                            <option value="{{ plan.planID }}" {% if Actividad.planID == plan.planID %} selected {% endif %} > {{ plan.planCODIGO|upper }}</option>
                            {% endfor %}                  
                        </select>    
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="accion">Seleccione una acción</label>
                        <select  class="form-control select2" style="width: 100%;" name="accionID" id="accionID-{{ hash_vista }}">
                            {% for accion in acciones  %}
                            <option value="{{ accion.accionID }}" {% if Actividad.accionID == accion.accionID %} selected {% endif %} >{{ accion.accionCODIGO|upper}} - {{ accion.accionTITULO|upper}}</option>
                            {% endfor %}                  
                        </select>    
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="meta">Meta a la que apunta</label>
                        <div id='metas-{{ hash_vista }}'>
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>  


<script type="text/javascript">

    $(document).ready(function () {
        $('.select2').select2();
        mostrarSelectMetasPorAccion("metas-{{ hash_vista }}", $("#accionID-{{ hash_vista }}").val(), function(){
            seleccinarSelect("metas-{{ hash_vista }} select", '{{ Actividad.metaID }}');
        });
        $("#accionID-{{ hash_vista }}").change(function(){
            mostrarSelectMetasPorAccion("metas-{{ hash_vista }}", $("#accionID-{{ hash_vista }}").val());
        });
    });
    
    
</script>