Can't get options value/text from dynamically created select list

Can't get options value/text from dynamically created select list

Hi,

Trying to learn about select/options dynamic lists. I found this nifty dynamic select program on the internet. Trouble is I can't get the value and text/html. Here is my code: The list populates fine but if I click on a selection nothing happens. Do I need a 'click' function?

Thanks for your help in advance.

R

  1. <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Google Maps API getting Lat and Long with Geocoding</title>
       
        <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
        <script src="https://maps.googleapis.com/maps/api/js"></script>
        <script type="text/javascript" src="../jquery/getHtmlParams.js"></script>     
     
    <script type="text/javascript">
     
    $(document).ready(function(){

    loadlist($('select#latlng').get(0),                   /*the 'select' object*/
     'getMarkers.php?getlist=latlng', 'name');
     
      alert($( "#latlng option:selected" ).html());  // says undefined
     
    });             
          
    </script>

    <script type="text/javascript">

    function loadlist(selobj, url, nameattr) {

        $(selobj).empty();
        $.getJSON(url, {}, function(data) {

            $.each(data, function(i,obj) {          
                $(selobj).append($('<option></option>').val(obj[nameattr]).html(obj[nameattr]));
            }); //each
           
        }); // getJSON 
    } // loadlist

    </script>

    <h3>Dynamically loaded list Sample</h3>
    <label>Marker For:</label><br>

    <select name='latlng' id='latlng' size='5'></select>
     
    <script type="text/javascript">


      alert($( "#latlng option:selected" ).html()) // says undefined


    </script>
     
    </body>
    </html>