on Change select drop down 1st value by default

[AlexGole]

Hi all, I am trying to get a UI that allows users to select Measurement values from a drop down menu. I have some code that works great but I have to first manually select  from drop down otherwise I get an "undefined" value.   I would like that if nothing is selected in drop down by user then it automatically uses the first value in drop down. Any idea why?

1) This how I change selected values in my drop down:

var areasUnits;
                var areasUnitsText;
                var LenghtUnits;
                var LenghtUnitsText;
                $('#Area').on('change', function () {
                    areasUnits = $(this).val();
                    areasUnitsText = $(this).find("option:selected").text();
                    alert(this.value)
                });
                $('#Length').on('change', function () {
                    LenghtUnits = $(this).val();
                    LenghtUnitsText = $(this).find("option:selected").text();
                });

2) This is my drop downs:

 <select id="Area" class="form-control">
                       
                        <option value="UNIT_ACRES">Acres</option>
                        <option value="UNIT_SQUARE_MILES">Square Miles</option>
                        <option value="UNIT_ARES">Ares</option>
                        <option value="UNIT_HECTARES">hectares</option>
                        <option value="UNIT_SQUARE_FEET">Square Feet</option>
                        <option value="UNIT_SQUARE_KILOMETERS">Square Kilometers</option>
                        <option value="UNIT_SQUARE_METERS">Square Meters</option>
                    </select>


                    <div style=" width: 100%; border: solid; padding: 10px;"><span style="font-weight:bolder;">Results:</span> <span style="font-weight:bolder;" id="area"></span></div>
                    <br />
                    <p style=" font-style: italic; font-weight: bold; color:red;">Polylines</p>


                    <select id="Length" class="form-control">
                       
                        <option value="UNIT_FOOT">Feet</option>
                        <option value="UNIT_KILOMETER">Kilometer</option>
                        <option value="UNIT_METER">Meter</option>
                        <option value="UNIT_STATUTE_MILE">Mile</option>
                    </select>

[thejuskambi]

In the html tag set the selected value for the default option you want to be selected like below

<option value="UNIT_FOOT" selected>Feet</option> 

[AlexGole]

I tried but it still shows the value as "undefined"

[thejuskambi]

Can you set a jsbin or something which we can take a look at?

[AlexGole]

sure. I ll get back ill post it soon.

[AlexGole]

My code is here​. An attempt to reproduce what I am trying to do is here​ ( I have only set the area but not length). Thanks,

Alex

[thejuskambi]

Are you talking about the areaUnits and LenghtUnits variables? if so, they are not initialized until the change event on the dropdown occurs. otherwise I can see the dropdown has default selected value.

You can set a default value while initializing like

var areasUnits = dom.byId("Area").value;