Question

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

所需功能 我正在尝试创建一个跨浏览器可折叠多选框，只在折叠框时显示所选选项（当鼠标退出选择时折叠），然后在框展开（鼠标悬停）时保留所有选项并保留状态已检查的项目。请参阅底部的小提琴以获得所需的功能（仅限Firefox）

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

需要帮助：有没有办法使用以前选中的（已选中）状态恢复多项选项的选项？

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，而是保存选项元素本身。他们的州将被包括在内。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

使用jquery获取多选的状态

1 个答案: