提交表格後保留下拉值

動態創建下拉框，選項通過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>

來源

2016-05-26 sow

那該怎麼辦？哪個版本的IE？你期望它做什麼？它究竟在做什麼？ –

當我選擇'OOR'時，市場下拉應顯示值（1,2,3,4,5）。但是當我從第一個下拉菜單（fenv）選擇OOR時，這裏的市場下拉並不是在IE瀏覽器中填充值。但在Firefox中它顯示的值很好。我正在使用IE11版本。 – sow

我放在一起，似乎在兩個瀏覽器中工作的jsfiddle。 https://jsfiddle.net/y16se3uj/ – bhietpas

你可以使用隱藏的字段來保存表格提交後的數據。像這樣：

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>

來源

2016-05-31 05:06:26 Pankaj

嗨Pankaj，謝謝你的幫助。像冠軍一樣工作。 – sow

要堅持一些數據，您將需要使用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>

對於第二部分是比較複雜的壽。你可以做一些javascript魔術設置它的propper值：

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

來源

2016-05-29 21:22:07 LordNeo

嗨LordNeo，謝謝你的迴應。但我們正在使用ColdFusion而不是PHP。你可以讓我知道我們可以在Coldfusion中實現嗎？ – sow

它很容易做到。

一旦您提交表單（僅限於同一頁），您可以檢查CF中的提交條件並運行一個採用提交值的JavaScript函數。

提交表單
FN populateSelect（）填充選擇框
CFIF檢查頁面加載表單提交

運行FN 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>

祝你好運！

來源

2016-06-01 02:45:29 Sanjeev

提交表格後保留下拉值

回答

相關問題