Javascript 使用jquery从所有下拉列表中删除一个值

我有多个相同值的下拉列表。如果他们从其他下拉列表中选择首次午餐，我必须删除午餐。下面是我的代码

前端代码

<?php for($i=1; $i<=7; $i++) 
{?>
<select name="task<?php echo $i;?>" onchange="checkSelected(this,<?php echo $i; ?>);" id="task<?php echo $i;?>"
  <option value="Testing">Testing</option>
  <option value="Lunch">Lunch</option>
  <option value="Other">Other</option>
</select>
<?php } ?>

我试过了，但没用

 $("#task+"number"+ > option[value='Lunch']").remove();

应该是

$("#task" + number + " > option[value='Lunch']").remove();

可以使用.each函数仅删除具有从列表中选择的值的选项

$('select').change(function(){

    var value = $(this).val()
    // Probably best to store this value here before removing the option below.

    $(this).children().each(function(){
        if($(this).val() == value){
            $(this).remove();
        }
    });

});

工作示例-

具有多个下拉列表的示例

从另一个选择框中删除选项的示例-

这样做的唯一问题是，通过删除选定选项，它不会显示为选定选项。但是，您可以在选择该值之后以及从列表中删除该值之前存储该值，如上所述

---

你应该考虑的另一件事情是改变。删除到“禁用”，“Tress”，这样你就可以重新启用选项稍后，如果你需要，例如有人想回去改变以前的选择。这里也有一个例子

如果你的答案只涉及午餐选项，请参见我的评论，那么有一个解决方案。它还没有完全优化，但你可以看看你如何做到这一点

JSFIDLE

HTML

---

注意：我想您必须允许用户更改其选择。这就是为什么我用disable代替remove。但是，如果确实要删除option元素，可以轻松地修改此代码。

第一个错误：+符号。行$task+number+>选项[value='午餐].remove；必须是$task+number+>option[value='午餐].删除；你可以创建一个提琴来更好地理解你的问题吗？删除操作只涉及午餐或所有可用值测试，eso？它应该只删除午餐使用我的评论不太困难？@Nicolasherrard为什么不将其作为答案发布？它从选定下拉列表中删除OP将使用选定元素的动态名称。给它一个静态的名字永远不会达到他想要的。我想你还不明白我的要求。如果他从其他选择框中选择第一个选项作为午餐，我必须删除午餐。因此，nxt时间的午餐没有选项，但仍然没有从下拉列表中删除午餐您想删除所有下拉列表中的午餐吗？是的，只有选择下拉列表应包含午餐，其他下拉列表中的其余部分不应包含午餐

$('select').change(function(){

    var value = $(this).val()
    // Probably best to store this value here before removing the option below.

    $(this).children().each(function(){
        if($(this).val() == value){
            $(this).remove();
        }
    });

});

<form action="demo.html" id="myForm">
    <p>
        <label>First:</label>
        <select class="event_handler" name="task1">
            <option value="Testing">Testing</option>
            <option value="Lunch">Lunch</option>
            <option value="Other">Other</option>
        </select>
    </p>
    <p>
        <label>Second:</label>
        <select class="event_handler" name="task2">
            <option value="Testing">Testing</option>
            <option value="Lunch">Lunch</option>
            <option value="Other">Other</option>
        </select>
    </p>
    <input type="submit" value="Submit">
</form>

$(function () {
    // Handler for .ready() called.
    $(".event_handler").on("change", function () {
        event.preventDefault();
        var name_select = $(this).attr("name");

        if ($(this).val() == "Lunch") {
            //Loop through each "lunch" element
            $('.event_handler option[value=Lunch]').each(function(){
                //Remove all 'lunch' option, except the ont in the 'name_select' select
                if($(this).parent().attr("name") != name_select){
                    $(this).remove();
                }
            });
        }
    })
});