javascript - 提交表单后保留下拉值

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>