Question

我有多个相同值的下拉菜单。如果他们从其他下拉菜单第一次选择午餐，我必须删除午餐。以下是我的代码

前端代码

<?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 } ?>

在javascript中我删除了第3个选择框（task3），它已被删除但我必须删除所有其他除了选定的一个我如何实现这个

javascript功能

function checkSelected(e,number)
 {
   if(e.value == 'Lunch')
   {
        $('#task3 option[value="Lunch"]').remove();


   }

 }

我尝试了这个，但它无法正常工作

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

Answer 1

应该是

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

Answer 2

您可以使用.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();
        }
    });

});

工作示例 - http://jsfiddle.net/amQuU/

多个下拉列表的示例http://jsfiddle.net/amQuU/1/

从其他选择框中移除选项的示例 - http://jsfiddle.net/amQuU/2/

执行此操作的唯一问题是，通过删除所选选项，它不会显示为所选选项。但是，您可以在选择它之后以及从上面列出的列表中删除它之前存储该值。

您应该考虑的另一件事是将.remove()更改为.attr('disabled','true')，以便以后可以重新启用该选项，如果您需要，例如有人想回去改变之前的选择。这也是一个例子http://jsfiddle.net/amQuU/3/

Answer 3

如果只是＆＃34;午餐＆＃34;选项与您的回答有关（参见上面的评论），然后有一个解决方案。它尚未完全优化，但你知道如何做到这一点。

JSFiddle http://jsfiddle.net/4qndV/1/

<强> HTML

<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>

<强> JQuery的

$(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();
                }
            });
        }
    })
});

注意：我想你必须允许用户更改他的选择。这就是我使用＆＃34;禁用＆＃34;取代＆＃34;删除＆＃34;。但是，如果您真的想要删除选项元素，则可以轻松调整此代码。

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

3 个答案: