仅当使用 html 和 php 在先前的表单控件上选择值时才显示表单控件

Question

我正在创建一个带有源控件的网页（本例中为 2 个）。我的代码如下：

<body>

    <div class="option_choice_global">
         Select your options 

        <div class="col-xs-2">
            <label> Application </label>
            <select class="form-control" id="application">
                <?php 
                    $applications = get_apps(); 
                    foreach ($applications as $key => $value) { echo '<option value='.$key.'>'.$value.'</option>'; }
                ?> 
            </select>
        </div> 

        <div class="col-xs-1">
            <label> Version </label>
            <select class="form-control" id="version">
                <?php 
                    $versions = get_versions(); 
                    foreach ($versions as $key => $value) { echo '<option value='.$key.'>'.$value.'</option>'; }
                ?> 
            </select>
        </div> 

        <div class="col-xs-12">   
            <button type="submit" class="btn btn-default" onclick="fonction_submit_graph(this)">  <b> Submit </b>  </button>
        </div>                     
    </div>  

</body>

但我希望第二个（版本）仅在第一个控制器（应用程序）上选择了一个值时出现。然后我的函数 get_versions() 将取决于所选的应用程序：get_versions(application_number).

如何才能仅在选择第一个控制器上的值时才显示第二个控制器？并获得选定的值？谢谢！

Answer 1

如果我没理解错的话，您想在从第一个下拉列表中选择一个值后显示第二个 select 下拉列表。

这可以通过 JavaScript 和 CSS 轻松完成：

在第二个 select 标签中，添加这些属性：style="{display: none;}"。这将隐藏下拉菜单。也给它id="select2"方便识别
在第一个 select 标记中，添加此属性：onchange=showHiddenSelect(); 这会导致在值更改时调用函数，即选项被 selected。也给它一个 id="select1".
在文档的某处，定义 showHiddenSelect 函数，如下所示：函数 showHiddenSelect() { document.getElementById("select2").style.display="block"; }

如果您还希望获得 selected 值，只需在该函数中添加以下内容：var select1value = document.getElementById("select1").value; 并使用它执行您想要的操作。

如果您需要将 select1 中的 selected 选项发送到后端，然后用于计算 select2 的选项，那么您最好的选择是使用AJAX 从脚本发送和接收数据，然后用 JavaScript.

填充 select

仅当使用 html 和 php 在先前的表单控件上选择值时才显示表单控件

show form-control only when value chosen on previous form-control with html and php

php

html

form-control