时间戳

首页 > 解决方案 > JavaScript：显示是否有任何选项已赋值

javascript - JavaScript：显示是否有任何选项已赋值

问题描述

我是这个论坛的新手。我尝试检查一些以前的解决方案，但它们不太适合。我有按预期工作的条件下拉框。但是，我只想在用户从其中一个二级（子）菜单中选择时显示“显示我去哪里”按钮。只要不是框中显示的默认值，他们选择哪个选项都没有关系。

我尝试对其进行设置，以便所有二级菜单都在一个数组中，该数组在函数中进行检查。基本上，如果选择了任何选项并分配了一个值，则应显示该按钮。

这是我的代码。我究竟做错了什么？我只是在学习 JavaScript，所以请多多包涵。

<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";
    
    }
}

标签： javascript

解决方案

您的代码几乎可以正常工作。顶部的 showbtn() 函数中有一个错误正在停止 javascript 运行，因此没有到达 document.getElementById("submit").style.display = "block" 行。我已经简化了这个功能，它现在可以根据需要显示按钮（参见下面的小提琴工作示例链接）。代码更改仅在 Javascript showbtn() 函数中，如下所示：

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

见小提琴工作

推荐阅读