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

【问题标题】：show form-control only when value chosen on previous form-control with html and php仅当使用 html 和 php 在先前的表单控件上选择值时才显示表单控件
【发布时间】：2017-01-07 05:23:37
【问题描述】：

我正在创建一个带有来自控件的网页（本例中为 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)。

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

【问题讨论】：

尝试使用IF 语句？
您需要将该部分放在另一个文件或同一个文件中的不同函数中并选择 AJAX 调用

标签： php html form-control

【解决方案1】：

如果我理解正确，您希望在从第一个下拉列表中选择一个值后显示第二个 select 下拉列表。

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

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

如果您还希望获得选定的值，您只需将其添加到该函数中：var select1value = document.getElementById("select1").value; 并用它做您想做的事。

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

【讨论】：

以下不起作用：$.ajax({ type: 'POST', dataType: 'JSON', url: 'setup_data.php', data: {'var':select1value, 'type ':'test'}, 成功：function(data) { alert(data); var options = ''; for (var prop in data) { options += ''; } $('#version').html(options); } });与
这可能取决于您的setup_data.php 返回的数据。您确定该脚本会向您返回正确的数据吗？
我将代码更改为 setup_data.php 并且它可以工作。谢谢你 Shalvah 的帮助！