0

我正在创建一个带有 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)。

How can I do to show the second controller only when a value on the first one is selected ? 并获得选定的值？谢谢！

4

1 回答 1

0

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

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

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

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

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

于 2017-01-06T19:31:10.367 回答