使用jquery分离/附加select选项
我正在尝试设置一个具有多个下拉列表的表单，这将允许访问者对列表项进行排名。示例表单：
<form action="" name="rankem">
<select name="rank1" id="rank1">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
<option value="option4">Option 4</option>
<option value="option5">Option 5</option>
</select>
<select name="rank2" id="rank2">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
<option value="option4">Option 4</option>
<option value="option5">Option 5</option>
</select>
<select name="rank3" id="rank3">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
<option value="option4">Option 4</option>
<option value="option5">Option 5</option>
</select>
</form>当选项被选中时，我想从每个下拉列表中删除(分离)它们。
我的实际列表包含更多的选项，这样人们就可以对32个选项中的前10个进行排名，所以想象一下上面的示例代码，其中有10个下拉列表，每个下拉列表有32个选项。
如果有人从select#rank1中选择' option2‘，我希望从随后的下拉列表中删除option2，以此类推。如果它们返回到Option4，并将其选择更改为‘select#rank1 4’，则需要将'option2‘附加到所有下拉列表中。
我看过.detach()和.append()，但不知道我在做什么。
$("option[value="+$(this).val()+"]").detach();我尝试了上面的启动，但它只是从所有下拉列表中删除了该选项。我是一个JS/jquery菜鸟，所以任何正确方向的帮助或链接都将不胜感激。谢谢!
回答 4
Stack Overflow用户
发布于 2010-08-04 08:50:24
您是否考虑过启用/禁用与连接和分离？
我对代码的理解速度不是很快(这里使用的是折断的手臂)，但是一般的算法是这样的：
$(function() {
// Respond to any value change.
$('select').change(function() {
var val = $(this).val();
// Enable/disable depending on the selection.
// Removed the each loop after seeing You's answer (+1). He has a better solution.
$('select:not(#' + $(this).parent().id + ') option[value=' + val + ']').removeAttr('disabled');
$('select(#' + $(this).parent().id + ') option[value=' + val + ']').attr('disabled', 'disabled');
});
});这还没有经过测试，我仍然在学习jQuery (所以我会接受反馈)。
Stack Overflow用户
发布于 2010-08-04 08:37:29
请尝试下面这一行(用于分离元素)：
$("select:not(#"+$(this).parent().attr('id')+") option[value="+$(this).val()+"]").detach();Stack Overflow用户
发布于 2010-08-04 09:22:55
这将从每个具有大于当前选择的排名号的选择中分离出选项，并将其放入一个javascript对象中，其中的键是父选择的id。每次更改select时，只会影响其后续的select，而不会影响链中较高的select。因此，如果选择“从rank2”，它将从rank3分离，但不会从rank1分离。再读一遍你的问题，我不确定这是不是你想要的功能，但不管怎样，它就在这里。
function rankIndex(id){
return id.substr(4);
}
$(document).ready(function(){
var removed = {};
$('select').each(function(){
// define each select's bin for removed elements as an object
removed[$(this).attr('id')] = {};
});
$('select').change(function(){
var $this = $(this),
$thisId = $this.attr('id'),
$thisRankIndex = rankIndex($thisId);
// add each element back to selects further in the chain
$.each(removed[$thisId], function(selectId, option){
$('#'+selectId).append(option);
});
// filter the selects that are further in the chain
// and detach the options into the removed bin
$('select').filter(function(i){
return rankIndex($(this).attr('id')) > $thisRankIndex;
}).find('option[value='+$this.val()+']').each(function(){
removed[$thisId][$(this).closest('select').attr('id')] = $(this).detach();
});
});
});为了进一步理解我所做的工作，需要阅读一些关键内容：javascript object和一些jQuery函数：filter()、each() (以及jQuery.each())和find()。如果可以的话，任何人都可以随意重构它，因为它有点冗长。希望这能有所帮助！
https://stackoverflow.com/questions/3401734
复制相似问题
腾讯云开发者
