topic Re: on Change select drop down 1st value by default in ArcGIS JavaScript Maps SDK Questions

on Change select drop down 1st value by default

AlexGole — Sat, 11 Dec 2021 20:50:57 GMT

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>

Re: on Change select drop down 1st value by default

thejuskambi — Tue, 03 Nov 2015 17:22:33 GMT

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

Re: on Change select drop down 1st value by default

AlexGole — Tue, 03 Nov 2015 17:31:26 GMT

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

Re: on Change select drop down 1st value by default

thejuskambi — Tue, 03 Nov 2015 17:35:43 GMT

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

Re: on Change select drop down 1st value by default

AlexGole — Tue, 03 Nov 2015 17:36:54 GMT

sure. I ll get back ill post it soon.

Re: on Change select drop down 1st value by default

AlexGole — Tue, 03 Nov 2015 18:05:21 GMT

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

Re: on Change select drop down 1st value by default

thejuskambi — Tue, 03 Nov 2015 19:09:44 GMT

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;