[英]javascript hide/show items in dropdown list
我开始研究javascripting,并想知道是否有人知道如何在html的下拉列表中隐藏值?
例如:带有值的dropdwon列表
Select One
Item1
Item2
Item3
Item4
Item5
我想隐藏项目4和5,就像这样,并在点击“显示...”时显示它。
Select One
Item1
Item2
Item3
Show 2 more items (Item 4 and 5 hidden)
那可能吗? 下面是我已经开始的一段代码。
var css = select;
var markers = cluster.getMarkers();
var markersLength = markers.length;
var nextOption = new Option("Select One");
css.add(nextOption, 0);
for(var i = 0; i < markersLength; i++) {
nextOption = new Option(markers[i].title);
try {
css.add(nextOption, -1);
} catch (e) {
css.add(nextOption, null);
}
}
您需要通用解决方案,因此请使用类标记more
选项和隐藏项。
事实证明,你不能始终如一的风格,出option
S IN一个select
跨浏览器的,所以你需要动态改变列表选项:请参考这个问题: 如何隐藏的CSS一个<select>菜单中的<选项>?
select
追加元素): Select One
<select class="hidden">
<option>Item4</option>
<option>Item5</option>
<option>Item6</option>
<option>Item7</option>
<select>
<select>
<option>Item1</option>
<option>Item2</option>
<option>Item3</option>
<option class="more">More</option>
</select>
$('select').change(function(){
var $select = $(this);
if ($select.val() == "More"){
$('.more').remove();
$select.append($('.hidden').children());
}
});
然后select
更改事件,隐藏more
选项并显示隐藏的元素:
$('select').change(function(){
var $select = $(this);
if ($select.val() == "More"){
$('.more').hide().prevAll('.hidden').show();
}
});
在select
s中似乎有一个奇怪的错误,因为最后一个项目始终可见(即使在样式化时也是如此!)。 我现在添加了一个空白条目来解决这个问题。 这也是为什么我没有把隐藏的项目放在更多的后面,因为最后一个总是显示(多么奇怪的错误 - 已经问过这个新问题: 为什么总是显示最后一个选择选项,即使在样式化时也是如此 )。
您还需要清除所选的“更多”值,因为它将不再存在。
$('select').change(function () {
var $select = $(this);
if ($select.val() == "More") {
$('.more').hide().prevAll('.hidden').show();
$select.val('');
}
});
基于我的相关问题,我指出了这一点: 如何使用CSS隐藏<select>菜单中的<option>? 显然,您无法一致地设置选择选项的样式,因此动态地将项目添加到列表将是理想的解决方案。
这是我的解决方案:
HTML
<select id="test">
<option value="1">Select One</option>
<option value="2">Item 1</option>
<option value="3">Item 2</option>
<option value="4">Item 3</option>
<option value="5">Select Two</option>
<option value="6">Item 4</option>
<option value="7">Item 5</option>
</select>
脚本
var array1 = ["1","6","7"];
var array2 = ["1","2","3","4"];
var arrayAll = ["1","2","3","4","5","6","7"];
function hideOptions(array) {
for (var i = 0; i < array.length; i++) {
$('#test option[value="' + array[i] + '"]').hide();
}
}
function showOptions(array) {
for (var i = 0; i < array.length; i++) {
$('#test option[value="' + array[i] + '"]').show();
}
}
$("#test").change(function(){
if($("#test").val()=="5"){
hideOptions(array2);
showOptions(array1);
}
if($("#test").val()=="1"){
hideOptions(array1);
showOptions(array2);
}
});
hideOptions(array1);
这是小提琴
怎么样的:
<head>
<script type="text/javascript">
function makeDynamicOption(target, threshold, messageMore, messageLess) {
var allOptions = collectOptions();
target.addEventListener("change", updateOptions, false); // Use your own event manager
showOptions(threshold);
addMessage(messageMore);
// ---
function collectOptions() {
var options = [];
for(var ii=0; ii<target.options.length; ii++) {
options.push(target.options[ii]);
}
return options;
}
function updateOptions() {
var selectedText = this.options[this.selectedIndex].text;
if (selectedText == messageMore) {
showOptions(allOptions.length);
addMessage(messageLess);
} else if (selectedText == messageLess) {
showOptions(threshold);
addMessage(messageMore);
}
}
function showOptions(upToIndex) {
removeOptions();
for (var ii=0; ii<upToIndex; ii++) {
target.options[ii] = allOptions[ii];
}
}
function removeOptions() {
while(target.options.length > 0) {
target.removeChild(target.options[0]);
}
}
function addMessage(message) {
target.options[target.options.length] = new Option(message, "");
}
}
</script>
</head>
<body>
<select id="foo">
<option value="value1">item1</option>
<option value="value2">item2</option>
<option value="value3">item3</option>
<option value="value4">item4</option>
<option value="value5">item5</option>
</select>
<script type="text/javascript">
makeDynamicOption(
document.getElementById("foo"),
3,
"More...",
"Less..."
);
</script>
</body>
此设计将lib部分(在HEAD中作为外部脚本链接)与激活部分分开。 它还允许您在生成视图时注入本地化文本,并保留现有选项,以防您有其他脚本与它们交互。 请注意,您仍应使用自己的事件管理器,而不是直接使用addEventListener,如脚本中所示,以获得更好的跨浏览器支持。
编辑:这是脚本的工作原理:
makeDynamicOptions()
函数,传递要显示的选项数,以及用于展开/折叠其他选项的消息。 消息可以由视图管理器写入,即如果需要可以很容易地进行本地化。 change
处理程序,以便在选项列表上触发更新。 该脚本使用addEventListener
,但是应该替换一个自己的事件管理机制,以获得更好的跨浏览器支持。 HTH。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.