title: How to change javascript value on selection
body: <p>I need to change the initialization coordinates of the google map when the user selects different cities. When I select an option, the initial coordinates of the map need to change.</p>
  
  <p>my markup:</p>
  
  <pre><code>&lt;select class='form-control' id='id_district' type='text' name="district"&gt;
      &lt;option value='' disabled selected&gt;District *&lt;/option&gt;
      &lt;option value="Limassol"&gt;Limassol&lt;/option&gt;
      &lt;option value="Nicosia"&gt;Nicosia&lt;/option&gt;
      &lt;option value="Paphos"&gt;Paphos&lt;/option&gt;
      &lt;option value="Larnaca"&gt;Larnaca&lt;/option&gt;
      &lt;option value="Ammoxostos"&gt;Ammoxostos&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>and the script:</p>
  
  <pre><code>var geocoder = new google.maps.Geocoder();
  
  function geocodePosition(pos) {
      geocoder.geocode({
          latLng: pos
      }, function(responses) {
          if (responses &amp;&amp; responses.length &gt; 0) {
              updateMarkerAddress(responses[0].formatted_address);
          } else {
              updateMarkerAddress('Cannot determine address at this location.');
          }
      });
  }
  
  function updateMarkerStatus(str) {
      document.getElementById('markerStatus').innerHTML = str;
  }
  
  function updateMarkerPosition(latLng) {
      document.getElementById('info').innerHTML = [latLng.lat(), latLng.lng()].join(', ');
      jQuery("#info_1").val([latLng.lat()]);
      jQuery("#info_2").val([latLng.lng()]);
  }
  
  function store_coordinates(latLng) {
      document.getElementById('info').innerHTML = [latLng.lat(), latLng.lng()]
  }
  
  function updateMarkerAddress(str) {
      document.getElementById('address').innerHTML = str;
  }
  
  function initialize() {
      var latLng = new google.maps.LatLng(35.155560129479596, 33.34708248242191);
  
      var map = new google.maps.Map(document.getElementById('mapCanvas'), {
          zoom: 8,
          center: latLng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
      });
      var marker = new google.maps.Marker({
          position: latLng,
          title: 'Point A',
          map: map,
          draggable: true
      });
      updateMarkerPosition(latLng);
      geocodePosition(latLng);
      google.maps.event.addListener(marker, 'dragstart', function() {
          updateMarkerAddress('Dragging...');
      });
      google.maps.event.addListener(marker, 'drag', function() {
          updateMarkerStatus('Dragging...');
          updateMarkerPosition(marker.getPosition());
      });
      google.maps.event.addListener(marker, 'dragend', function() {
          updateMarkerStatus('Drag ended');
          geocodePosition(marker.getPosition());
      });
  }
  
  google.maps.event.addDomListener(window, 'load', initialize);
  </code></pre>
  
  <p>this function needs to be changing with the jQuery</p>