OpenLayers 3 - zoom to a selected feature

Question

I am working with OpenLayers 3. I used a dropdown menu to select a feature and I would like to zoom to the extent of the selected feature. At the moment, it is possible to select by the dropdown menu but not to zoom. Is there any way to fix this?

    function selectByDivision(){ 
            var divisionUser = document.getElementById('division-select').options[document.getElementById('division-select').selectedIndex].text;


            var selectedFeatures = select.getFeatures();                                
            selectedFeatures.clear();               
            var features = lyr_divisions3857.getSource().getFeatures();

            if(features){
                  for(i=0;i<features.length;i++){
                                            if(features[i].get('DIVISION')==divisionUser){                                              

                                                        feature= features[i];                                                                                                                   
                                                        selectedFeatures.push(feature);                                                             
                                                                                                                                                                                //map.zoomToExtent(features[i].getDataExtent());

                                                        var polygon = selectedFeatures.getFeatures();
                                                        var extent = polygon.getGeometry();

                                                        var size = (map.getSize());
                                                        view.fit(
                                                        extent,
                                                        size
                                                        );

                                                        map.getView().fit(extent, map.getSize());                                                                                                               
                                                        }
                                                    }                                                                           
                            }                                                                                                                                           
                        }       

Answer 1

Using fit will set the view of the map to fit the geometry being used.

map.getView().fit(feature.getGeometry(), map.getSize())

Answer 2

First thing first, let's make the concept clear:

I assume, your select variable holds a reference to an instance of ol.interaction.Select. If you call its getFeatures method, you will get an ol.Collection object holding your selected features internally. It is absolutely valid to call methods on it like clear, or push.

However, collection objects do not have a getFeatures method. To get the internal array the collection is holding, you have to call its getArray method instead:

var polygon = selectedFeatures.getArray();

Which returns a simple array. Now I assume, your function makes sure, this collection can only hold one member at the time you access it. An array though is an array with only one member, too, therefore you must access it with an index value:

var extent = polygon[0].getGeometry();

Now that you grabbed a reference to a geometry object correctly, it is still an instance of ol.geom.Geometry, not an extent (an array with four coordinates). As the method fit needs an extent, you can calculate it from the geometry with its getExtent method. Thus, you have to modify your line like this:

var extent = polygon[0].getGeometry().getExtent();

UPDATE:

You can call fit with a geometry object, therefore calculating the geometry's extent is not necessary.