使用jQuery从一组选择菜单中删除和添加选项 [英] Removing and adding options from a group of select menus with jQuery
问题描述
这比标题更复杂一点，但这是必要的商业规则：
This is a little more complicated than the title makes it out to be, but here are the essential business rules:
- 有
页面上的三个选择菜单，每个菜单都填充了相同的
选项和值。 - 总会有三个选择
菜单。 - 每个选择
菜单中的选项/值总是会有相同数量
。 - 在任何一个中选择一个问题
菜单将从
另外两个菜单中删除该问题。 - 从任何菜单中重新选择另一个问题
将带来
回复之前已从其他
两个菜单中删除的
的问题。
- There are three select menus on the page, each filled with the same options and values.
- There will always be three select menus.
- There will always be the same number of options/values in each select menu.
- Selecting a question in any of the menus will remove that question as an option from the other two menus.
- Re-selecting a different question from any of the menus will bring back the question that was previously removed from the other two menus at the index it was at previously.
我尝试了几种不同的方式，而杀死我的东西是5号。我知道它不会被插入到确切的索引中，因为有些问题可能已被删除，这会重新排序索引。它基本上需要一个insertBefore或者insertAfter，它将它放在同一个槽中。
I've tried this a few different ways, and the thing that is killing me is number 5. I know that it wouldn't be inserted at the exact index because some questions may have already been removed, which would reorder the index. It basically needs an insertBefore or insertAfter that puts it in the same "slot".
即使你没有发布任何代码，也有一些关于如何处理这个问题的想法会非常有帮助的。选择菜单和jQuery看起来像这样，但我已经尝试了不同的变化：
Even if you don't post any code, some thoughts on how you might approach this would be extremely helpful. The select menus and jQuery look something like this, but I've had numerous tries at it in different variations:
jQuery：
$(function() {
$(".questions").change(function() {
var t = this;
var s = $(t).find(":selected");
// Remove, but no "insert previously selected" yet...
$(".questions").each(function(i) {
if (t != this) {
$(this).find("option[value=" + s.val() + "]").remove();
}
});
});
});
HTML：
<select name="select1" class="questions">
<option value="1">Please select an option...</option>
<option value="2">What is your favorite color?</option>
<option value="3">What is your pet's name?</option>
<option value="4">How old are you?</option>
</select>
<select name="select2" class="questions">
<option value="1">Please select an option...</option>
<option value="2">What is your favorite color?</option>
<option value="3">What is your pet's name?</option>
<option value="4">How old are you?</option>
</select>
<select name="select3" class="questions">
<option value="1">Please select an option...</option>
<option value="2">What is your favorite color?</option>
<option value="3">What is your pet's name?</option>
<option value="4">How old are you?</option>
</select>
推荐答案
不要删除元素，隐藏它们。删除后，你会遇到很多不必要的问题。这对我有用：
Don't remove the elements, hide them. With removing, you are causing you a lot more problems than necessary. This works for me:
$(function() {
$('select.questions').change(function() {
var hidden = [];
// Get the values that should be hidden
$('select.questions').each(function() {
var val = $(this).find('option:selected').val();
if(val > 0) {
hidden.push($(this).find('option:selected').val());
}
});
// Show all options...
$('select.questions option').show().removeAttr('disabled');
// ...and hide those that should be invisible
for(var i in hidden) {
// Note the not(':selected'); we don't want to hide the option from where
// it's active. The hidden option should also be disabled to prevent it
// from submitting accidentally (just in case).
$('select.questions option[value='+hidden[i]+']')
.not(':selected')
.hide()
.attr('disabled', 'disabled');
}
});
});
我对你的HTML做了一些小改动，我表示一个应该始终可见的选项值为0.所以有效选项从1到3。
I made a small change to your HTML also, I denoted an option that should always be visible with a value of 0. So the valid options go from 1 to 3.
这是一个有效的例子，告诉我是否误解了你：
Here's a working example, tell me if I misunderstood you:
这篇关于使用jQuery从一组选择菜单中删除和添加选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
