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

Question

I have written simple form with an onload function which always pre-populates market values. 我编写了带有onload函数的简单表单，该函数始终会预先填充市场价值。 But when I select one market value from the drop-down list and after submitting the form the value should stay selected in the drop-down. 但是，当我从下拉列表中选择一个市场价值时，在提交表格后，该价值应在下拉菜单中保持选中状态。 Here's the related code: 以下是相关代码：

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

How to select the value again after POST? 开机自检后如何再次选择该值？

Answer 1

The drop-down list will lose its value, because you are posting the form. 下拉列表将失去其价值，因为您正在发布表单。 So you need to retain it and set it on load. 因此，您需要保留它并在加载时进行设置。 One way to do this is to use a cookie . 一种方法是使用cookie 。

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

Now within the onload function you can check whether this cookie value is present and set the selected market value from it. 现在，在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

Instead of writing the options via jQuery you could write them directly in ColdFusion: 不用通过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>

Only when you load the data asynchronously you need to fill the drop-down list in jQuery, which may look like this: 仅当异步加载数据时，才需要填写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