使用jQuery在Leaflet弹出窗口中动态创建的内容

时间:2018-07-23 10:59:09

标签: javascript jquery leaflet

我正在尝试创建一个动态创建的下拉列表,以从Leaflet弹出窗口提交用户内容(每个弹出窗口根据条件包含一个不同的列表)。但是,如果关闭了一个弹出窗口并打开了一个新窗口,我不知如何无法清除列表。到目前为止,这是我的代码:

polygons=L.geoJson(data, {
 onEachFeature: function(feature, layer) {

  layer.on('click', function (){
   var list = document.getElementById('dropdownBuild');  //create html list elements dynamically.
   var buildings = {'School': 2000, 'Hospital': 4000,'Pop-up Bar':50};
   var selText;

   for (var k in buildings){  //generate list element if condition is true
    if (buildings[k] >= feature.properties.area){
       var entry = document.createElement('li');
       entry.appendChild(document.createTextNode(k));
       list.appendChild(entry);
    }
   }

   $(".dropdown-menu li").click(function(){ //submit user choice
    selText = $(this).text();
    var sql ="UPDATE data_game SET usage='"+selText+"' WHERE cartodb_id=22";
    submitToProxy(sql);
   });
  });

  var container = $('<div />');   //popup container
  var label = L.marker(layer.getBounds().getCenter());

  //fill popup container with list
  container.html(" <input type='hidden' name='selection' id='buildInput'> <div class='dropdown'> <button class='btn btn-primary dropdown-toggle' type='button' data-toggle='dropdown'>Build something<span class='caret'></span></button><input id='search_type' name='search_type' type='hidden'><ul class='dropdown-menu' id='dropdownBuild'></ul>" );

  layer.bindPopup(container[0]);
 }
}).addTo(map);

我猜可能一定是这样,获取列表ID并删除所有子级,但是我不知道该放在哪里:

$("#dropdownBuild").children().remove();

感谢您的帮助!

0 个答案:

没有答案