使用 jquery 获取多个 select 的状态

Question

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

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

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

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

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

});

如果您认得此 fiddle 中的代码，很抱歉没有记入您的姓名，但我丢失了 link。

我也有一个 fiddle 用于仅使用 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>

使用 jquery 获取多个 select 的状态

Get the state of a multiple select with jquery

jquery

select

cross-browser

show-hide