獲取多的狀態與jQuery

一個小問題，

所需的功能： 我試圖做一個跨瀏覽器可摺疊多重選擇框，即只顯示框摺疊時的選定選項（鼠標退出選擇時摺疊），然後在框展開（鼠標懸停）時恢復全部選項並保留已選項目的狀態。看到小提琴在底部所需的功能（僅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

來源

2015-11-05 Dreamscourge

輸入元件的動態狀態不包括在.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>

來源

2015-11-05 21:51:12 Barmar

獲取多的狀態與jQuery

回答

相關問題