使用 jquery 获取多选的状态

Question

希望你们能帮我解决我遇到的一个小问题

所需功能： 我正在尝试制作一个跨浏览器可折叠的多选框，它仅在框折叠时显示所选选项（鼠标退出选择时折叠），然后在框展开（鼠标悬停）并保留状态时将它们全部恢复的检查项目。有关所需功能，请参阅底部的 Fiddle（仅限 Firefox）

问题： 问题是检查状态似乎没有记录在 HTML 中，它可能是 GET/POST 数据的形式，如果是，如何访问它。无论是那个还是我错过了什么或做错了什么，这很可能是它不起作用的原因;-)

需要帮助：有没有办法恢复多选的选项及其先前选择（选中）的状态？

jsFiddle jQuery collapsible select box

function removeOptions($select) {
    var $optionsToRemove = $select.find('option:not(:selected)'); //filter for non selected options
    $optionsToRemove.remove(); //remove
}
function setSelectCurrentState($select) {
        $select.data("currentHTML", $select.html()); //save the current state (this does not work for multiple)
}
function restoreOptions($select) {
    var ocHTML = $select.data("currentHTML"); //retrieve the data
    if (ocHTML != undefined) {
        $select.html(ocHTML); //restore (the state is not sotred in the html so this doesn't work)
    }
}


$(document).ready(function () {
    var $hoverSelect = $('#hoverSelect');

    /*As we leave the select box store the current state and then remove filtered options*/
    $hoverSelect.mouseleave(function () {
        setSelectCurrentState($hoverSelect); // save the current state
        removeOptions($hoverSelect); //remove options
    });

    /*When we hover back over the select restore all options with their selected states*/
    $hoverSelect.mouseenter(function () {
        restoreOptions($hoverSelect);
    });

});

如果你在这个小提琴中认出了你的代码，很抱歉没有记下你，但我丢失了链接。

我也有类似的东西，它只使用 CSS 并且在 Firefox 中运行良好，但由于 IE 和 Edge 不允许设置选项 display:none; 它在这些浏览器。此代码将举例说明如果您使用 Firefox 查看它，我希望它如何工作。

jsFiddle CSS collapsible select box

Answer 1

.html() 中不包含输入元素的动态状态，它只包含来自 DOM 的 HTML。

不是保存 HTML，而是保存选项元素本身。他们的状态将包含在其中。

function removeOptions($select) {
  var $optionsToRemove = $select.find('option:not(:selected)'); //filter for non selected options
  $optionsToRemove.remove(); //remove
}

function setSelectCurrentState($select) {
  $select.data("currentOptions", $select.find('option'));
}

function restoreOptions($select) {
  var oldOptions = $select.data("currentOptions"); //retrieve the data
  if (oldOptions) {
    $select.empty().append(oldOptions);
  }
}


$(document).ready(function() {
  var $hoverSelect = $('#hoverSelect');

  /*As we leave the select box store the current state and then remove filtered options*/
  $hoverSelect.mouseleave(function() {
    setSelectCurrentState($hoverSelect); // save the current state
    removeOptions($hoverSelect); //remove options
  });

  /*When we hover back over the select restore all options with their selected states*/
  $hoverSelect.mouseenter(function() {
    restoreOptions($hoverSelect);
  });

});

body {
  background-color: #99b;
}
form {
  width: 150px;
  margin: 0 auto;
}
h1,
h2 {
  text-align: center;
}
#hoverSelect {
  width: 150px;
  height: 65px;
  font-size: 1.2em;
}
#hoverSelect:hover {
  height: 150px;
}
#wrapper {
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Collapsable select box</h1>
<h2>only shows selected items when collapsed, all when expanded (hover)</h2>
<br />
<div id="wrapper">
  <form>
    <select id="hoverSelect" name="hoverSelect" multiple="multiple">
      <option value="1">One</option>
      <option value="2" class="two">Two</option>
      <option value="3">Three</option>
      <option value="4">Four</option>
      <option value="5">Five</option>
      <option value="6">Six</option>
    </select>
  </form>
</div>
<br />
<h2>It should remember state but doesn't</h2>