2017-01-06 7 views
0

Я создаю веб-страницу с элементами управления (2 в этом примере). Мой код выглядит следующим образом:показать форму управления только тогда, когда значение, выбранное при предыдущем управлении формой с помощью html и php

<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).

Как сделать, чтобы показать второй контроллер только при выборе значения для первого? И чтобы получить выбранное значение? Спасибо!

+0

пытался использовать оператор 'IF'? –

+0

Вам нужно поместить этот раздел в другой файл или тот же файл в другую функцию и выбрать один из вызовов AJAX –

ответ

0

Если вы правильно поняли, вы хотите отобразить второй выпадающий список select после того, как значение будет выбрано из первого.

Это можно легко сделать с помощью JavaScript и CSS:

  • Во втором select тега, добавьте эти атрибуты: style="{display: none;}". Это скроет выпадающий список. Также дайте ему id="select2" для удобства идентификации.
  • В первом теге select добавьте этот атрибут: onchange=showHiddenSelect(); Это вызывает функцию, которая вызывается, когда изменяется значение, т.е. выбран вариант. Также дайте ему id="select1".
  • Где-то в документе, определяют showHiddenSelect функцию следующим образом:. функция showHiddenSelect() { document.getElementById ("Выбор2") style.display = "блок"; }

Если вы хотите, чтобы получить выбранное значение, вы бы просто добавить это в этой функции: var select1value = document.getElementById("select1").value; и делать то, что вы хотите с ним.

Если вам нужна выбранная опция от select1, которая будет отправлена ​​на бэкэнд, а затем использована для расчета параметров для select2, то лучше всего использовать AJAX для отправки и получения данных из сценария, а затем заполнить выбор с JavaScript.

+0

Следующие действия не работают: $ .ajax ({ type: 'POST', dataType: 'JSON', URL: 'setup_data.php', данные: { 'вар': select1value, 'тип': 'тест'}, успех: функция (данные) { оповещения (данные); опции вар = ''; for (var prop in data) { опции + = '<значение опции = "+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 0 +) } }); с eleanor

+0

Это может зависеть от данных, возвращаемых вашей 'setup_data.php'. Вы уверены, что скрипт вернет вам нужные данные? – shalvah

+0

Я меняю код на setup_data.php, и он работает. Спасибо, Шалва за помощь! – eleanor