如何使用 jQuery 在 ColdFusion 脚本中 POST 后选择下拉值？答案

【问题标题】：How to select drop-down value after POST in ColdFusion script using jQuery?如何使用 jQuery 在 ColdFusion 脚本中 POST 后选择下拉值？
【发布时间】：2017-01-26 04:03:07
【问题描述】：

我用onload 函数编写了一个简单的表格，它总是预先填充市场价值。但是，当我从下拉列表中选择一个市场价值并提交表单后，该值应在下拉列表中保持选中状态。相关代码如下：

<html>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  <cfif isdefined("form.submit")>
    form submitted
    <cfdump var="#form#">
  </cfif>

  <body onload="myFunction()">
    <h1>Hello World!</h1>
    <cfform action="dropdowntest.cfm" method="post">
      <cfselect name="market1" id="market1"></cfselect>
      <br> <br>
      <button id="addTypes1" >add types</button><br> <br>
      <CFINPUT class="but" TYPE="submit" NAME="SUBMIT" VALUE="SEARCH">
    </cfform>

    <script>
    function myFunction() {
      //var selectedVal = $("#market1").val();
      var kinds = ["A", "B", "C"];
      $.each(kinds, function(index, value) {         
        $("#market1").append("<option value='"+value+"'>" +value+ "</option>");
        //$("#market1").val('selectedVal')
      });
    }
    </script>
  </body>
</html>

POST后如何再次选择值？

【问题讨论】：

如果您提交页面将刷新并重置选择。除非您想将值保存在本地存储中并在页面加载时加载它
您需要在提交表单时将这些值保存在某处。提交后，页面会重新加载，所有未保存的数据都会消失。您应该将其保存在服务器上并在页面加载时将其取回。
当您发布表单时，您可以使用表单范围。使用它。

标签： javascript jquery coldfusion

【解决方案1】：

下拉列表将失去其价值，因为您正在发布表单。因此，您需要保留它并将其设置为加载。一种方法是使用cookie。

$('select[name=market1]').on('change', function() {
  $.cookie("marketVal", this.value );
});

现在在onload 函数中，您可以检查此cookie 值是否存在并从中设置选定的市场值。

function myFunction() {
  var selectedVal = $.cookie("marketVal" );
  var kinds = ["A", "B", "C"];
  $.each(kinds, function(index, value) {         
    $("#market1").append("<option value='"+value+"'>" +value+ "</option>");
  });
  if(selectedVal) {
    $("#market1").val(selectedVal);
  }
}

【讨论】：

为什么需要 cookie？您已经拥有了可以使用的表单范围。

【解决方案2】：

您可以直接在 ColdFusion 中编写选项，而不是通过 jQuery 编写选项：

<cfselect name="market1" id="market1">
  <cfloop array="#['A', 'B', 'C']#" item="val">
    <option value="#val#"
        #structKeyExists(FORM, "market1") and FORM.market1 eq val ?
        " selected" : ""#>#val#</option>
  </cfloop>
</cfselect>

只有在异步加载数据时才需要填写jQuery中的下拉列表，可能如下所示：

<script>
function myFunction() {
  var kinds = ["A", "B", "C"];
  $.each(kinds, function(index, value){
    $("##market1").append("<option value='"+value+"'>" +value+ "</option>");
  });
  <cfif structKeyExists(FORM, "market1")>
    $("##market1 > option[value=#FORM.market1#]").prop("selected", true);
  </cfif>
}
</script>

【讨论】：