JavaScript: Show If Any Option Has Assigned Value

Question

I'm new to this forum. I tried checking some previous solutions, but they didn't quite fit. I have conditional dropdown boxes that work as intended. However, I only want the SHOW ME WHERE TO GO button to show once the user selects from one of the secondary (child) menus. It doesn't matter which option they select so long as it isn't the default value showing in the box.

I tried to set it up so that all the secondary menus are in an array that gets checked over in the function. Basically if whatever option is selected and is assigned a value, the button should show.

Here is my code. What am I doing wrong? I'm just learning JavaScript, so please bear with me.

<select id="TransactionType" onchange="check();">
<option selected="selected" value="">I am a...</option> 
<option value="DH">Drop and Hook</option>
 <option value="Live">Live Unload</option>
 <option value="LTL">LTL</option>
  <option value="FedEx">FedEx Ground/Express</option>
   <option value="Visitor">Visitor</option>
</select>
<br>
<br>
<select id="DHOps" style=display:none; onchange="showbtn();">
<option selected="selected" value="">Describe your transaction...</option>
    <option value="LILO">Load In - Load Out</option>
    <option value="LIEO">Load In - Empty Out</option>
    <option value="EILO">Empty In - Load Out</option>
    <option value="EIEO">Empty In - Empty Out</option>
    <option value="BILO">Bobtail In - Load Out</option>
    <option value="PUP">Pup Trailers/Containers</option>
    <option value="CONT">Containers</option>
</select>
<select id="LUOps" style=display:none; onchange="showbtn();">
<option selected="selected" value="">Where will you be unloaded?</option>
    <option value="WH1">Warehouse 1 / 100 Level Docks</option>
    <option value="WH2">Warehouse 2 / 200 Level Docks</option>
    <option value="WH3">Warehouse 3 / 300 Level Docks</option>
    <option value="WH4">Warehouse 4 / 400 Level Docks</option>
</select>
<select id="LTLOps" style=display:none;>
<option selected="selected" value="">Where do I go?</option>
    <option value="327">Dock Door 327</option>
</select>
<select id="FEDEXOps" style=display:none;>
<option selected="selected" value="">Describe your transaction...</option>
    <option value="RETURNS">Returns Load In - Load Out</option>
    <option value="EMPTY">Empty In - Load Out</option>
</select>
<select id="VISITOROps" style=display:none;>
<option selected="selected" value="">What is the purpose of your visit?</option>
    <option value="MAINT">Delivery for Maintenance</option>
    <option value="VEND">Canteen/Vending</option>
    <option value="GARBAGE">Garbage Pickup</option>
    <option value="OFFICE">Visit Transportation Office</option>
</select>
<br>
<br>
<button id="submit" type="button" style=display:none;>SHOW ME WHERE TO GO</button>

function check() {
    var dropdown = document.getElementById("TransactionType");
    var current_value = dropdown.options[dropdown.selectedIndex].value;

    if (current_value == "DH") {
        document.getElementById("DHOps").style.display = "block";
        document.getElementById("LUOps").style.display = "none";
        document.getElementById("LTLOps").style.display = "none";
        document.getElementById("FEDEXOps").style.display = "none";
        document.getElementById("VISITOROps").style.display = "none";
    }
    if (current_value == "Live") {
        document.getElementById("LUOps").style.display = "block";
        document.getElementById("DHOps").style.display = "none";
        document.getElementById("LTLOps").style.display = "none";
        document.getElementById("FEDEXOps").style.display = "none";
        document.getElementById("VISITOROps").style.display = "none";
    }
    if (current_value == "LTL") {
        document.getElementById("LTLOps").style.display = "block";
        document.getElementById("DHOps").style.display = "none";
        document.getElementById("LUOps").style.display = "none";
        document.getElementById("FEDEXOps").style.display = "none";
        document.getElementById("VISITOROps").style.display = "none";
    }
    if (current_value == "FedEx") {
        document.getElementById("FEDEXOps").style.display = "block";
        document.getElementById("DHOps").style.display = "none";
        document.getElementById("LUOps").style.display = "none";
        document.getElementById("LTLOps").style.display = "none";
        document.getElementById("VISITOROps").style.display = "none";
    }
    if (current_value == "Visitor") {
        document.getElementById("VISITOROps").style.display = "block";
        document.getElementById("DHOps").style.display = "none";
        document.getElementById("LUOps").style.display = "none";
        document.getElementById("LTLOps").style.display = "none";
        document.getElementById("FEDEXOps").style.display = "none";
    }
}

function showbtn (){

    var childboxes = [document.getElementById("DHOps"), document.getElementById("LUOps"), document.getElementById("LTLOps"), document.getElementById("FEDEXOps"), document.getElementById("VISITOROps")];
    
    if (document.getElementsById(childboxes).onchange = true) {
         document.getElementById("submit").style.display = "block";
    
    }
}

Answer 1

Your code is almost working. There is an error in the showbtn() function at the top that is stopping javascript running, so the line document.getElementById("submit").style.display = "block" is not reached. I have simplified this function and it now displays the button as you wish (see fiddle work example link below). The code change is only in the Javascript showbtn() function as so:

function showbtn (){
         document.getElementById("submit").style.display = "block"; 
}

See Fiddle working

Answer 2

There are a couple of issues I see on your code.

In your showbtn() function, your using the getElementsById function, but as far as I am aware, this doesn't exist. Were you trying to execute getElementsByName instead?

Either way, that would return a NodeList that you'd have to iterate over, and I see that you're trying to check the onchange , which in itself is an assignable property. That wouldn't work as expected.

I feel like you could simplify your logic by checking if at least one of your <select> tags has a selected value that isn't "" . Below is a simple suggestion - you can simplify if you want to by creating easier-to-select elements (either by names or class names, which would work with getElementsBy<Name|ClassName> )

// Array of select IDs.
var arrayOfSelects = ['DHOps', 'LUOps', 'LTLOps', 'FEDEXOps'];

// Iterate on each one.
for (let select of arrayOfSelects) {
  var e = document.getElementById(select);

  // Checking if there is a selected value that isn't null, undefined, 0 or empty.
  if (e.value) {
    document.getElementById("submit").style.display = "block";
    break;
  }
}