Сохраняйте значения выпадающего списка после отправки формы

Question

Создание динамического окна выпадающего списка и добавление параметров через массивы javascript, и я хотел сохранить значения после отправки формы. Скажем, если я выберу «OOR» и «2», то после отправки формы мне захочется увидеть эти значения в этих выпадающих меню.

Спасибо.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 

<script language="javascript"> 

    OORs=new Array("1","2","3","4"); 
    NoOORs=new Array("A","B","C"); 

    populateSelect(); 
    $(function() { 


     $('#fenv').change(function(){ 
      populateSelect(); 
     }); 

    }); 
    function populateSelect(){ 

     fenv=$('#fenv').val(); 

     $('#market').html(''); 
     if(fenv=='OOR'){ 
      $.each(OORs,function(index,t) { 
       $("#market").append("<option value='"+t+"'>" +t+ "</option>"); 
      }); 
     } 
     else { 
      $.each(NoOORs,function(index,t) { 
       $("#market").append("<option value='"+t+"'>" +t+ "</option>"); 
      }); 

     } 

    } 
</script> 

<form> 
    <select id="fenv" NAME="fenv"> 
     <option value="OOR2">OOR2</option> 
     <option value="OOR">OOR</option> 

    </select> 

    <select id="market" name="market"></select> 
    <input type="submit" name="submit" value="submit" > 
</form> 

Answer 1

Вы можете использовать скрытые поля для сохранения данных после того, как форма представляет. Пример:

OORs=new Array("1","2","3","4"); 
    NoOORs=new Array("A","B","C"); 

    populateSelect(); 
    $(function() { 


     $('#fenv').change(function(){ 
      populateSelect(); 
     }); 

    }); 
    function populateSelect(){ 

     fenv=$('#fenv').val(); 
     marketvalues = []; 

     $('#market').html(''); 
     if(fenv=='OOR'){ 
      $.each(OORs,function(index,t) { 
       $("#market").append("<option value='"+t+"'>" +t+ "</option>"); 
       marketvalues.push(t); 
      }); 
     } 
     else { 
      $.each(NoOORs,function(index,t) { 
       $("#market").append("<option value='"+t+"'>" +t+ "</option>"); 
       marketvalues.push(t); 
      }); 

     } 
     $("#marketvalues").val(marketvalues.join(",")); 
    } 
</script> 

<form method="post"> 
    <select id="fenv" NAME="fenv"> 
     <option value="OOR2" <cfif structKeyExists(form, "fenv") and form.fenv EQ "OOR2"> selected="selected"</cfif>>OOR2</option> 
     <option value="OOR" <cfif structKeyExists(form, "fenv") and form.fenv EQ "OOR"> selected="selected"</cfif>>OOR</option> 

    </select> 

    <select id="market" name="market"> 
    <cfif structKeyExists(form, "marketvalues") and trim(form.marketvalues) NEQ ""> 
     <cfloop list="#form.marketvalues#" index="mv"> 
      <option value="#mv#" <cfif form.market EQ mv> selected="selected"</cfif>>#mv#</option> 
     </cfloop> 
    </cfif> 
    </select> 
    <input type="submit" name="submit" value="submit"/> 
    <input type="hidden" name="marketvalues" id="marketvalues" value=""/> 
</form> 

Answer 2

Чтобы сохранить некоторые данные, вам нужно будет использовать сеанс php или сообщение.

Для первого выбора должно быть легко:

<select id="fenv" NAME="fenv"> 
    <option value="OOR2" <?php if($_POST["fenv"]=="OOR2") echo "selected";?>>OOR2</option> 
    <option value="OOR" <?php if($_POST["fenv"]=="OOR") echo "selected";?>>OOR</option> 
</select> 

Для второй части более сложной Тхо. Вы могли бы сделать некоторые настройки его значения Проппер яваскрипта магии:

var element = document.getElementById('market'); 
element.value = "<?php echo(isset($_POST['market'])&&($_POST['market']!='')?$_POST['market']:'');?>"; 

Answer 3

Его легко сделать.

После того, как вы отправите форму (только на ту же страницу), вы можете проверить условие отправки в CF и запустить функцию JavaScript, которая принимает представленные значения.

1. Отправить форму
2. п populateSelect() заполнит полей выбора
3. Cfif проверяет, является ли загрузилась страница является представление формы

4. работает ФН afterFormSubmitSetSelectedValues ​​(fenv, рынок) значения

   <form method="post"> 
       <select id="fenv" NAME="fenv"> 
        <option value="OOR2">OOR2</option> 
        <option value="OOR">OOR</option> 
       </select> 
       <select id="market" name="market"></select> 
       <input type="submit" name="submit" value="submit"> 
   </form> 
   
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
   
   <script language="javascript"> 
       var OORs = ["1","2","3","4"], //declaring the OORs 
        NoOORs = ["A","B","C"], //the NoOORs 
        fenvRef = $('#fenv'), //creating the ref using jQuery Once, so we do not need to do a DOM query again and again 
        marketRef = $('#market'), // same for market 
        populateSelect = function() { 
   
         var fenv = fenvRef.val(), 
          marketvalues = []; 
   
         marketRef.html(''); 
   
         if ('OOR' === fenv) { 
          $.each(OORs, function(index,t) { 
           marketRef.append("<option value='" + t + "'>" + t + "</option>"); 
           marketvalues.push(t); 
          }); 
         } else { 
          $.each(NoOORs, function(index,t) { 
           marketRef.append("<option value='" + t + "'>" + t + "</option>"); 
           marketvalues.push(t); 
          }); 
         } 
        }, 
        afterFormSubmitSetSelectedValues = function (fenv, market) { // upon reload this Fn() will set the selected values 
         fenvRef.val(fenv); 
         if ('OOR' === fenv) { 
          populateSelect(); 
         } 
         marketRef.val(market); 
        }; 
   
        $(function() { 
         fenvRef.change(function() { 
          populateSelect(); 
         }); 
        }); 
   
        // this will populate the initial values 
        populateSelect(); 
   
        <cfif isDefined('form') AND structKeyExists(form, 'submit')> 
        //only executed if the form is previously submitted 
         afterFormSubmitSetSelectedValues('<cfoutput>#form.fenv#</cfoutput>', '<cfoutput>#form.market#</cfoutput>'); 
        </cfif> 
   </script> 
   

Удачи вам!