Is there a simplified way to write this function?

[ChrisSergent]

I have these two functions which both work, but I would like to cut it down to one if possible. They populate dropdown lists on two forms. Any thoughts on how to change this to one function?:

// Begin populateSupportSelect
    function populateSupportSelect(x, y) {
        //get the domain value 
        var domain = app.supportLayer.getDomain(x);


        //get the html select by ID
        var select = document.getElementById(y);


        //clear the current options in select
        for (var option in select) {
            select.remove(option);
        }


        var opt = document.createElement('option');
        opt.innerHTML = "";
        select.appendChild(opt);
        //loop through the domain value to fill the drop down
        for (var i = 0; i < domain.codedValues.length; i++) {
            console.log(domain.codedValues.name);
            ; var opt = document.createElement('option');
            opt.innerHTML = domain.codedValues.name;
            opt.value = domain.codedValues.name;
            select.appendChild(opt);
        }


    }
    // End populateSupportSelect
    
    // Begin populateSelect
    function populateSelect(x, y) {
        //get the domain value 
        var domain = app.signLayer.getDomain(x);


        //get the html select by ID
        var select = document.getElementById(y);


        //clear the current options in select
        for (var option in select) {
            select.remove(option);
        }


        var opt = document.createElement('option');
        opt.innerHTML = "";
        select.appendChild(opt);
        //loop through the domain value to fill the drop down
        for (var i = 0; i < domain.codedValues.length; i++) {
            console.log(domain.codedValues.name);
            ; var opt = document.createElement('option');
            opt.innerHTML = domain.codedValues.name;
            opt.value = domain.codedValues.name;
            select.appendChild(opt);
        }


    }
    // End populateSelect

Here is how I populate the dropdown lists:

/* Enter your domain item and then the element to populate */
                populateSelect("BACKING", "backing");
                populateSelect("VISIBILITY", "visibility");
                populateSelect("CONDITION_", "condition");
                populateSelect("COLOR1", "color1");
                populateSelect("DELINEATOR", "delineator");
                populateSelect("ILLUM", "illum");
                populateSelect("ATTACHTYPE", "attachType");
                populateSelect("ATTACHLOC", "attachLoc");
                populateSelect("SITEOBS", "siteObs");
                populateSelect("SIGNSHAPE", "signShape");
                populateSelect("COLOR2", "color2");
                populateSelect("MUTCD", "mutcd");


                /* Show supports form */
            } else if (severity === "1") {
                app.attributesModal.modal("show");


                /* Enter your domain item and then the element to populate */
                populateSupportSelect("TYPE", "type");
                populateSupportSelect("SIZE_", "size");
                populateSupportSelect("MATERIAL", "material");
                populateSupportSelect("BASE", "base");
                populateSupportSelect("RATING", "rating");

            }

[ChrisSmith7 · Accepted solution]

Those two functions are exactly the same, except for the "//get the domain value" part.

Would this work for you?

 function populateSelect(x, y, layer) {  
          //get the domain value 
          var domain;
          switch(layer) {
              case 'support':
                  domain = app.supportLayer.getDomain(x);  
                  break;
              case 'sign':
                  domain = app.signLayer.getDomain(x);  
                  break;
          }  

          //get the html select by ID  
          var select = document.getElementById(y);  

          //clear the current options in select  
          for (var option in select) {  
              select.remove(option);  
          }  

          var opt = document.createElement('option');  
          opt.innerHTML = "";  
          select.appendChild(opt);  
          //loop through the domain value to fill the drop down  
          for (var i = 0; i < domain.codedValues.length; i++) {  
              console.log(domain.codedValues.name);  
              ; var opt = document.createElement('option');  
              opt.innerHTML = domain.codedValues.name;  
              opt.value = domain.codedValues.name;  
              select.appendChild(opt);  
          }  

      }  

Usage would be like so:

populateSelect("MUTCD", "mutcd", "sign"); 

[ChrisSmith7]

You could also shorten it a little bit, if you wanted to do this, by sending in your layer object:

populateSelect("MUTCD", "mutcd", app.signLayer);

And adjusting the domain set-up, to something like this:

var domain = app.layer.getDomain(x);

This would negate the need for a switch statement or conditional.

[ChrisSergent]

I think I had something like that before and I got that it was not a function.

[ChrisSergent]

This worked well. Thanks!

[ChrisSergent]

I don't know why but that only populated part of the dropdown lists.

I uploaded the most recent version of my app on github: csergent45/streetSigns · GitHub

[ChrisSmith7]

The version on GitHub still shows the two separate functions - in main.js. Can you update that with the code that's only populating part of the list?

[ChrisSergent]

I don't know why but when I re-updated the code, it worked.

[ChrisSmith7]

Not sure if this occurred in your case, but depending on which browser you're using, and how your JavaScript is developed, I've noticed caching can be pretty robust, even when refreshing using ctrl-F5.

I usually clean cache and close my browser when making JS updates in my .js module files. Any JS in front end files, e.g. .aspx/.html, seems to get updated after a hard refresh.

[ChrisSergent]

I forget that. .NET had me spoiled with server side code.