Using JavaScript created select options as Leaflet map setContent

Question

Working on a creating a custom CRS Leaflet map. On map rightclick, show a popup with select boxes for users interaction.

var submit_Loc_popup = L.popup();
map.on('contextmenu', onPopupBoxSubmit);
var featureGroup = L.featureGroup().addTo(map);

I have the select box's hidden, until something is chosen, shown here Fiddle#1: https://jsfiddle.net/ay9pso8L/

I'd like to have those select options inserted into my maps popupContent. Unsuccessfully tried different ways but nothing produces the JSfiddles clean selects/hidden content... I manually created the Div + select(s) with a gigantic HTML string, but I'm unable to hide content as they are embedded in quotes since it's a string... JSFiddle #2 Here: https://jsfiddle.net/0x16zqkc/

Excerpt from JSfiddle#2;

function onPopupBoxSubmit(eb) {

       var xy = map.project([eb.latlng.lat,eb.latlng.lng],6); 
       console.log(xy);
       var coords3 = convertToInGameCords(xy);
       console.log(coords3);
       var popupContent = <seeJSFiddle#2 for HTML>
submit_Loc_popup
                .setLatLng(eb.latlng)
                .setContent(popupContent + '"x": ' +coords3.y+', "y": '+coords3.x)
                .openOn(map);
          };

Reading the documentation: https://leafletjs.com/reference-1.4.0.html#popup-setcontent Maybe I've tried a function to create the DIV and pass that in but its still not modifiable.

I've been researching for a week and this Answer is somewhat similar to what I want... Kind of, but its for a marker and when I tried to do that with the popUpcontent it didn't work. Dynamically create leaflet popup via JavaScript Object

Long story short;

How can I merge JS fiddle#1 hidden_select_(#node_resource) into JS Fiddle#2's popup.setContent()?

EDIT#1 Based on Toms reply, JS Fiddle updated https://jsfiddle.net/q5cdhw3e/1/ Drop downs are working when including the handlers INSIDE a mymap.on('popupopen', However, my onSubmit is not working, I will dig around to see what I can find.

EDIT#2 JS Fiddle updated https://jsfiddle.net/Ls1zax5c/

Placing the eventlistener first solved the on_submit problem

  document.querySelector("#node_submission_form2").addEventListener("submit", function(e) {

Answer 1

There is no way of setting existing HTML element as popup content. The only way is to supply string description of HTML content via setContent method.

In your second JSFiddle, where you try to do this, there are several things wrong. First there is missing reference to BootStrap library:

<link crossorigin="anonymous" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" rel="stylesheet">
<script crossorigin="anonymous" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Then the static popup HTML code is not identical to the one that is dynamically created in your first JSFiddle. It should look like this:

<form id="node_submission_form2" onsubmit="return false;">
  <div class="node_submission_form_group" id="types">
    <select class="form-control" id="node_resource">
      <option disabled="" value="disabled" selected="">Select Type</option>
    <option value="resource_mining">resource_mining</option><option value="resource_lumberjacking">resource_lumberjacking</option><option value="resource_sickle">resource_sickle</option><option value="resource_monster">resource_monster</option><option value="resource_hands">resource_hands</option><option value="resource_poi">resource_poi</option></select>
  </div>
  <div class="container_node_resource">
    <div class="resource_mining" style="display: none;">
      Node Type for resource_mining
      <br>
      <select id="resource_mining">         
      <option value="1">Opt 1</option><option value="2">Opt 2</option><option value="3">Opt 3</option><option value="4">Opt 4</option><option value="5">Opt 5</option></select>
    </div>
    <div class="resource_lumberjacking" style="display: none;">
      Node Type for resource_lumberjacking
      <br>
      <select id="resource_lumberjacking">       
      <option value="1">Opt 1</option><option value="2">Opt 2</option><option value="3">Opt 3</option><option value="4">Opt 4</option><option value="5">Opt 5</option></select>
    </div>
    <div class="resource_sickle" style="display: none;">
      Node Type for resource_sickle
      <br>
      <select id="resource_sickle">        
      <option value="1">Opt 1</option><option value="2">Opt 2</option><option value="3">Opt 3</option><option value="4">Opt 4</option><option value="5">Opt 5</option></select>
    </div>
    <div class="resource_monster" style="display: none;">
      Node Type for resource_monster
      <br>
      <select id="resource_monster">       
      <option value="1">Opt 1</option><option value="2">Opt 2</option><option value="3">Opt 3</option><option value="4">Opt 4</option><option value="5">Opt 5</option></select>
    </div>
    <div class="resource_hands" style="display: none;">
      Harvesting Node Type for resource_hands
      <br>
      <select id="resource_hands">      
      <option value="1">Opt 1</option><option value="2">Opt 2</option><option value="3">Opt 3</option><option value="4">Opt 4</option><option value="5">Opt 5</option></select>
    </div>
    <div class="resource_poi" style="display: none;">
      Node Type for resource_poi
      <br>
      <select id="resource_poi">         
      <option value="1">Opt 1</option><option value="2">Opt 2</option><option value="3">Opt 3</option><option value="4">Opt 4</option><option value="5">Opt 5</option></select>
    </div>
  </div>
  <button class="btn btn-primary" type="submit" value="submit">Submit to map!</button
</form>

Then you also have to set handlers for your popup form:

mymap.on('popupopen', function(e) {
  $('#node_resource').bind('change',
    function() {
      var elements = $('div.container_node_resource').children().hide(); // hide all the elements
      var value = $(this).val();

      if (value.length) { // if somethings' selected

        elements.filter('.' + value).show(); // show the ones we want

      }
    }).trigger('change');   
  document.querySelector("#node_submission_form2").addEventListener("submit", function(e) {
    if (!doValidation()) {
      e.preventDefault(); //stop form from submitting
      //alert(selectedValue);
      //add database submissions here
    }
  });
}); 

function doValidation() //Make sure they selected a Harvesting type, and return the one theey selected
  {
    var selectDocID = document.getElementById("node_resource");
    var selectedValueinDropdown = selectDocID.options[selectDocID.selectedIndex].value;
      var arrayLength = myStringArray_node_resource.length;
    if (selectedValueinDropdown == "disabled")
    {
      alert("Please Select Harvesting Type!");
      exit();
    }
    else
    {
        for (var i = 0; i < arrayLength; i++) 
        { 
          if (selectedValueinDropdown == myStringArray_node_resource[i])
          { 
            alert("myStringArray_node_resource[i] = " + myStringArray_node_resource[i]);
            var selectDocID2 = document.getElementById(myStringArray_node_resource[i]);

              var selectedValueinSubDropdown = selectDocID2.options[selectDocID2.selectedIndex].value;
              alert("selectedValueinSubDropdown = " + selectedValueinSubDropdown);
            }
        }
    }
 }

Now popup form will work, the only thing left is to adjust it to the right size. I'll leave this to you.