title: leaflet change circle radius with jquery and selector
body: <p>I have a problem changing the circle radius of my marker with a selector. I am trying to achieve it with jquery on change but it doesnt work.I want the jquery function to be triggered by the selector, get it's value and then change the circle's radius of the marker.<br>
  Can you tell me where is the error?</p>
  
  <p>this is the selector :</p>
  
  <pre><code>&lt;div id="map"&gt;&lt;/div&gt;
  &lt;form&gt;
      &lt;select id="distance-selector" name="distance"&gt;
          &lt;option value=""&gt;Select distance:&lt;/option&gt;
          &lt;option value="1"&gt;500m&lt;/option&gt;
          &lt;option value="2"&gt;1km&lt;/option&gt;
          &lt;option value="3"&gt;5km&lt;/option&gt;
          &lt;option value="4"&gt;10km&lt;/option&gt;
          &lt;option value="5"&gt;50km&lt;/option&gt;
      &lt;/select&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>and here is my javascript/jquery code of the leaflet map:</p>
  
  <pre><code>$(document).ready(function () {
      var mymap = L.map('map').setView([51.505, -0.09], 13);
      L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=xxx', {
          attribution: 'Map data &amp;copy; &lt;a href="http://openstreetmap.org"&gt;OpenStreetMap&lt;/a&gt; contributors, &lt;a href="http://creativecommons.org/licenses/by-sa/2.0/"&gt;CC-BY-SA&lt;/a&gt;, Imagery © &lt;a href="http://mapbox.com"&gt;Mapbox&lt;/a&gt;',
          maxZoom: 18,
          id: 'mapbox.streets',
          accessToken: 'xxx'
      }).addTo(mymap);
  
      var marker;
      var circle;
      var all;
      mymap.on('click', function (e) {
          if (all) {
              mymap.removeLayer(all);
          }
          marker = new L.Marker(e.latlng, { draggable: true });
          circle = new L.circle(e.latlng, { radius: 500 });
          var circlePos = e.latlng;
          $('distance-selector').on('change', function () {
              if (circle) {
                  mymap.removeLayer(circle);
              }
              if (this.value == "") {
                  circle = new L.circle(circlePos, { radius: 500 });
              }
              if (this.value == "1") {
                  circle = new L.circle(circlePos, { radius: 500 });
              }
              if (this.value == "2") {
                  circle = new L.circle(circlePos, { radius: 1000 });
              }
              if (this.value == "3") {
                  circle = new L.circle(circlePos, { radius: 5000 });
              }
              if (this.value == "4") {
                  circle = new L.circle(circlePos, { radius: 10000 });
              }
              if (this.value == "5") {
                  circle = new L.circle(circlePos, { radius: 50000 });
              }
              all = L.layerGroup([marker, circle]);
              mymap.addLayer(all);
          });
          marker.on('dragend', function (e) {
              if (circle) {
                  mymap.removeLayer(circle);
              }
              circle = new L.circle(e.target.getLatLng(), { radius: 500 });
              all = L.layerGroup([marker, circle]);
              mymap.addLayer(all);
          });
  
          all = L.layerGroup([marker, circle]);
          mymap.addLayer(all);
      });
  })
  </code></pre>