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

要保留一些数据，您需要使用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']:'');?>";

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

很容易做到。

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

提交表格
fn populateSelect（）填充选择框
CFIF检查页面加载是否为表单提交

运行fn afterFormSubmitSetSelectedValues（fenv，market）值

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

提交表单后保留下拉值

3 个答案: