在Chrome中,这些行为不符合预期,如果使用size属性,则样式选项不起作用。 我怎样才能做到这一点?
<select size=2> <option>1</option> <option selected>2</option> <option style="display: none;">3</option> <option>4</option> </select> <br/> <select> <option>1</option> <option selected>2</option> <option style="display: none;">3</option> <option>4</option> </select>http://jsfiddle.net/D9X9U/1/
我在这里的最终游戏是有一个搜索框,可以过滤某种选择列表。
In Chrome these do not behave as expected, the style options doesn't work if a size attribute is used. How can I make this work?
<select size=2> <option>1</option> <option selected>2</option> <option style="display: none;">3</option> <option>4</option> </select> <br/> <select> <option>1</option> <option selected>2</option> <option style="display: none;">3</option> <option>4</option> </select>http://jsfiddle.net/D9X9U/1/
My end game here is to have a search box that filters a select list of some kind.
最满意答案
我最终使用隐藏的选择列表并在两者之间移动元素。 如果有人发现了这个并且可以改善这一点,那么我会将你的标记作为答案。 我或多或少地通过javascript和jquery摸索我的方式,所以我确信可以做很多事情来改善它。
http://jsfiddle.net/x6cfF/1/
编辑:任何发现这个寻找解决方案的人,这里有一个更好的解决方案https://codereview.stackexchange.com/questions/23706/better-way-to-filter-select-list/23710?noredirect=1#23710
<input type="search" id="SearchBox" /> <br /> <div class="scrollable" id="CustomerSelectDiv"> <select size=2 class="scrollableinside" id="CustomerSelect"> <option value=100>test</option> <option value=101>test1</option> <option value=102>test2</option> <option value=103>test3</option> </select> </div> <div style="display: none;"> <select id="CustomerSelectHidden"></select> </div> <script type="text/javascript"> window.onload=function() { var $options = $('#CustomerSelect option'); document.getElementById("SearchBox").onkeyup = function () { var $HiddenOptions = $('#CustomerSelectHidden option'); $HiddenOptions.each(function (index, value) { document.getElementById('CustomerSelect').appendChild(this); }); var search = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase(); var element = $options.filter(function () { var text = $(this).text().replace(/\s+/g, ' ').toLowerCase(); return !~text.indexOf(search); }).appendTo(document.getElementById('CustomerSelectHidden')); } } </script>I ended up using a hidden select list and moving elements between the two. If someone finds this and can improve this please do so, I will mark yours as the answer. I'm more or less fumbling my way through javascript and jquery so I'm sure a lot can be done to make this better.
http://jsfiddle.net/x6cfF/1/
Edit: anyone who finds this looking for a solution, there is a better one here https://codereview.stackexchange.com/questions/23706/better-way-to-filter-select-list/23710?noredirect=1#23710
<input type="search" id="SearchBox" /> <br /> <div class="scrollable" id="CustomerSelectDiv"> <select size=2 class="scrollableinside" id="CustomerSelect"> <option value=100>test</option> <option value=101>test1</option> <option value=102>test2</option> <option value=103>test3</option> </select> </div> <div style="display: none;"> <select id="CustomerSelectHidden"></select> </div> <script type="text/javascript"> window.onload=function() { var $options = $('#CustomerSelect option'); document.getElementById("SearchBox").onkeyup = function () { var $HiddenOptions = $('#CustomerSelectHidden option'); $HiddenOptions.each(function (index, value) { document.getElementById('CustomerSelect').appendChild(this); }); var search = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase(); var element = $options.filter(function () { var text = $(this).text().replace(/\s+/g, ' ').toLowerCase(); return !~text.indexOf(search); }).appendTo(document.getElementById('CustomerSelectHidden')); } } </script>更多推荐
发布评论