提交表单后保留下拉值

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

这很容易做到。

提交表单后（仅限同一页面），您可以在 CF 中检查提交条件并运行接受提交值的 JavaScript 函数。

1. 提交表格
2. fn populateSelect() 填充选择框
3. CFIF 检查页面加载是否为表单提交

4. 在FormSubmitSetSelectedValues(fenv, market) 值之后运行fn

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

祝你好运！

Answer 2

您可以在表单提交后使用隐藏字段来持久化数据。像这样：

    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 3

要保留一些数据，您需要使用 php session 或 post。

第一次选择应该很容易：

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

第二部分比较复杂。您可以做一些 javascript 魔术将其设置为 propper 值：

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