好吧,让我们从一个例子开始。
请记住,这只是一个示例。
<select id = "selection1">
<option value = "1" id = "1">Number 1</option>
<option value = "2" id = "2">Number 2</option>
<option value = "3" id = "3">Number 3</option>
</select>
现在,我们有一个包含 3 个选项的下拉菜单。
我现在想做的是隐藏一个选项。
添加style = "display:none"
不会有帮助。
该选项不会出现在下拉列表中,但使用箭头键,您仍然可以选择它。
本质上,它完全按照代码执行。它没有显示,就停在那里。
JQuery 函数 $("#1").hide()
不会工作。
另外,我不仅想隐藏该选项,还想完全删除它。
这样做有可能吗?
我必须使用父/同级/子元素吗?如果是这样,我仍然不确定如何。
一个相关问题:我发现有一个.remove()
在 JQuery 中可用。效果很好。
但是如果我想把它带回来怎么办?
if(condition)
{
$(this).remove();
}
我可以循环播放这个。应该不复杂。
但我想做的是:
类(class)最大容量:(此处输入字段)
选择房间:(此处下拉)
我想要它做的是使用诸如 .change()
之类的函数来更新 Dropdown或.keyup
.
我只能在输入内容后创建下拉菜单。在更改或按键时,相应地执行下拉菜单。
但我正在做的是这样的:
$roomarray = mysql_query("SELECT *
FROM
(
SELECT *,
CASE
WHEN type = 'Classroom' THEN 1
WHEN type = 'Computer laboratory' THEN 2
WHEN type = 'Lecture Hall' THEN 3
WHEN type = 'Auditorium' THEN 4
END AS ClassTypeValue
FROM rooms
) t
ORDER BY ClassTypeValue, maxppl, roomID");
echo "<select id = \"room\">";
while ($rooms = mysql_fetch_array($roomarray))
{ ?>
<option value=<?php echo $rooms['roomID']; ?> id=<?php echo $rooms['roomID']; ?>><?php echo $rooms['type']; echo " "; echo $rooms['roomID']; echo " ("; echo $rooms['maxppl']; echo ")"; ?></option>
<?php
}
echo "</select>";
是的,我知道这很困惑。我打算稍后更改它。
但现在的问题是:我可以根据输入的内容切换选项的删除吗?
是否可以通过循环生成的下拉菜单来做到这一点?因为我肯定不能继续执行 SQL 查询。或者这甚至是一种选择?因为如果可能的话,我仍然认为这是一件坏事。
最佳答案
hide() 不适用于 Chrome...我一直在尝试一种解决方法,并将其包装在一个名为“ExtraBox”的插件中。这个想法是临时存储选项,以便我们可以通过操作 DOM 来启用/禁用它们。我创建了该插件以使其更易于使用。
我已经在jsFiddle上发布了代码,所以你可以自己尝试一下:http://jsfiddle.net/KeesCBakker/HaFRC/ 。 [注意:jsFiddle 中的第一个项目,我很喜欢它!]
HTML 示例:
Select:
<br/>
<select id="TestKees">
<option value="1" class="s1">First value</option>
<option value="2" class="s2">Second value</option>
<option value="3" class="s3">Third value</option>
</select>
<br/>
Enable / Disable
<br/>
<input id="txt" type="text" value="s2" />
<button id="btnEnable">Enable</button>
我已将以下 jQuery 添加到我的 document.ready 函数中:
$('#TestKees').extraBox({ attribute: 'class' });
$('#btnEnable').click(function(){
$('#TestKees').data('extraBox').enable(
$('#txt').val()
);
});
$('#btnDisable').click(function(){
$('#TestKees').data('extraBox').disable(
$('#txt').val()
);
});
插件看起来像这样:
(function($) {
// Create ExtraBox object
function ExtraBox(el, options) {
// Default options for the plugin (configurable)
this.defaults = {
attribute: 'class'
};
// Combine default and options objects
this.opts = $.extend({}, this.defaults, options);
// Non-configurable variables
this.$el = $(el);
this.items = new Array();
};
// Separate functionality from object creation
ExtraBox.prototype = {
init: function() {
var _this = this;
$('option', this.$el).each(function(i, obj) {
var $el = $(obj);
$el.data('status', 'enabled');
_this.items.push({
attribute: $el.attr(_this.opts.attribute),
$el: $el
});
});
},
disable: function(key){
$.each(this.items, function(i, item){
if(item.attribute == key){
item.$el.remove();
item.$el.data('status', 'disabled');
}
});
},
enable: function(key){
var _this = this;
$.each(this.items, function(i, item){
if(item.attribute == key){
var t = i + 1;
while(true)
{
if(t < _this.items.length) {
if(_this.items[t].$el.data('status') == 'enabled') {
_this.items[t].$el.before(item.$el);
item.$el.data('status', 'enabled');
break;
}
else {
t++;
}
}
else { _this.$el.append(item.$el);
item.$el.data('status', 'enabled');
break;
}
}
}
});
}
};
// The actual plugin - make sure to test
// that the element actually exists.
$.fn.extraBox = function(options) {
if (this.length) {
this.each(function() {
var rev = new ExtraBox(this, options);
rev.init();
$(this).data('extraBox', rev);
});
}
};
})(jQuery);
关于jquery - 使用 JQuery 隐藏选择的选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4699410/