Question

我正在创建一个带有from-controls的网页（本例中为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();这会导致在值更改时调用函数，即选择了一个选项。同时给它一个id="select1"。
在文档的某处，定义showHiddenSelect函数，如下所示： function showHiddenSelect（）{ 。的document.getElementById（ “SELECT2”）的style.display = “块”; }

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

如果您需要将select1中的所选选项发送到后端，然后用于计算select2的选项，那么您最好的选择是使用AJAX发送和接收来自一个脚本，然后使用JavaScript填充选择。

只有在使用html和php在以前的表单控件上选择的值时才显示表单控件

1 个答案: