返回带有所选下拉列表的表单会在视觉上忘记其值

Question

将我选择的库运行用于以下问题，您可以通过转到他们的展示和讲述页面自己重现它：

https://harvesthq.github.io/chosen/

重现步骤：

在他们的标准 select 部分中，select - 您想要的任何国家 - 在标准下拉菜单和所选下拉菜单中
单击'fork on github'（或任何link）离开页面
点击 chrome
标准下拉菜单会向您显示之前 selected 的国家/地区
选择的下拉菜单是空的（但根据我在表单中看到的内容，在后台该值是 selected。它只是没有显示）

所以这会导致混乱。当用户通过提交表单（在我的例子中）返回然后再次前进时，它将使用与显示的值不同的值。

我的表格基本上是这样的：

<form id="myForm" action="${home}mySite/foo/bar" method="GET">

    <select id="bar" name="barName" class="chosen-select">
        <option value="a">foo 1</option>
        <option value="b">foo 2</option>
        <option value="c">foo 3</option>
        <option value="d">foo 4</option>
    </select>

    <input type="submit" value="Continue"/>

</form>

如果我删除 class="chosen-select" 它会按我预期的那样工作，但是我失去了我想要的 chosen 的不错的搜索功能。我试过

<option value="a" selected="selected">Foo 1</option>

在下拉列表中，但这没有帮助。

我也试过将 method="GET" 更改为 POST 但行为没有区别。它仍然像我提供的示例 link 中那样工作。

所选库在页面上生成以下内容：

<div class="chosen-container chosen-container-single" title="" id="parkingZoneOwner_chosen" style="width: 40%;"><a class="chosen-single">
  <span>Foo 1</span>
  <div><b></b></div>
</a>
<div class="chosen-drop">
  <div class="chosen-search">
    <input class="chosen-search-input" type="text" autocomplete="off">
  </div>
  <ul class="chosen-results"></ul>
</div></div>

但生成的 html 在我看来没有任何问题，即使在返回页面后也是如此。

我在 js 中试过这个 (events):

<script type="text/javascript">
$(function () {
    $(document).ready(function () {

        $(".chosen-select").chosen({
            width: "40%",
            search_contains: true
        });


        $('.chosen-select').on('chosen:ready', function(evt, params) {
            $(".chosen-select").val("a");
        });

    });
});


$('.chosen-select').on('chosen:ready', function(evt, params) {
    // alert("reached")
    // I had really high hopes for this one:
    $('.chosen-select').trigger('chosen:updated');

    //Also tried this one:
    $('#myForm')[0].reset();
});

有人知道解决这个问题的方法吗？选择的下拉菜单需要显示表单中实际提交的内容，或者整个表单可能会以某种方式重置为默认值。

Answer 1

这最终解决了问题，关闭了表单上的自动完成功能。

<form id="myForm" action="${home}mySite/foo/bar" autocomplete="off" method="GET">

我不知道为什么会这样。

返回带有所选下拉列表的表单会在视觉上忘记其值

Backing to a form with a chosen dropdown forgets its value visually

html

javascript

jquery-chosen