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

Question

我编写了带有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>

开机自检后如何再次选择该值？

Answer 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);
  }
}

Answer 2

不用通过jQuery编写选项，您可以直接在ColdFusion中编写它们：

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

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

问题描述

2 个解决方案

解决方案1
0 2017-01-26 04:32:31

解决方案2
-1 2017-01-27 08:01:07

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

问题描述

2 个解决方案

解决方案1 0 2017-01-26 04:32:31

解决方案2 -1 2017-01-27 08:01:07

解决方案1
0 2017-01-26 04:32:31

解决方案2
-1 2017-01-27 08:01:07