Filter Categories by Type

[JaredPilbeam2]

I'm having trouble with queries in my app. If you look at this page you'll notice the 'Search by Item' drop-down is blank and the 'Search by Category' displays 'Select one' by default. And when you select a Category with only one Item, such as 'Bicycle Reuse-Donation', the 'Search by Item' drop-down sets itself to that one item. How do I replicate this?

I've been messing around in this section for hours. I can't figure it out? Here's the app on Code Pen.

   // Add the unique values to the recycle type
    // select element. This will allow the user
    // to filter categories by type.
    function addToSelect(values) {
        var dOpt = document.createElement("option");
        dOpt.value = "";
        dOpt.selected = true;
        dOpt.text = "Select one";
        catTypeSelect.add(dOpt);
        values.uCatVals.sort();
        values.uCatVals.forEach(function (value) {
            var option = document.createElement("option");
            option.text = value;
            catTypeSelect.add(option);
        });

        var dOpt2 = document.createElement("option");
        dOpt2.value = "";
        dOpt2.disabled = true;
        dOpt2.selected = true;
        dOpt2.text = "Select one";
        keyTypeSelect.add(dOpt2);
        values.uKeyVals.sort();
        values.uKeyVals.forEach(function (value) {
            var option = document.createElement("option");
            option.text = value;
            keyTypeSelect.add(option);
        });

        return setDefinitionExpression();
    }
    // re-query the layer based on the selected Category and re-populate the keyword select
    function addToSelect2(values) {
        while (keyTypeSelect.options.length > 0) {
            keyTypeSelect.remove(0)
        }
        var dOpt2 = document.createElement("option");
        dOpt2.value = "";
        dOpt2.disabled = true;
        dOpt2.selected = true;
        dOpt2.text = "Select one";
        keyTypeSelect.add(dOpt2);
        values.sort();
        values.forEach(function (value)
        {
            var option = document.createElement("option");
            option.text = value;
            keyTypeSelect.add(option);
        });
        
        return true;
    }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[RobertScheitlin__GISP · Accepted solution]

Jared,

 Sure here is what you are looking for:

  function addToSelect2(values) {
    while (keyTypeSelect.options.length > 0) {
      keyTypeSelect.remove(0)
    }
    var dOpt2 = document.createElement("option");
    dOpt2.value = "";
    dOpt2.disabled = true;
    dOpt2.selected = true;
    dOpt2.text = "Select one";
    keyTypeSelect.add(dOpt2);
    values.sort();
    values.forEach(function (value) {
      var option = document.createElement("option");
      option.text = value;
      keyTypeSelect.add(option);
    });
//If there is only on value then select it.
    if(values.length === 1){
      keyTypeSelect.value = values[0];
    }
    return true;
  }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍