jQuery indexOf 选择框操作

Question

当在相邻的选择框中选择了该选项时，我试图弄清楚如何从选择框中删除选项。基本上，用户可以选择通过选择框在此处添加多条记录，但我想删除他们可用的选项列表，例如，他们不能在两个选择框中输入相同的值。

单击“添加更多”按钮时，我会淡入下一个选择框容器。 PHP 生成了许多选择框，我使用 JS 将它们隐藏起来。每个选择框都有一个附加到 ID 的唯一编号，因此我想访问那些包含字符串“other_pet_types”的选择框，然后我想遍历当前可见的选择框并构建一个已选择值的数组，然后我将从新显示的选择框中的选项列表中删除它。

这是我目前所拥有的，但这绝对是不对的 - 我无法让 ID 的初始测试正常工作。

任何指针都非常感谢，因为我意识到我目前的标记很宽泛！

 var vals = new Array();
//build array with currently selected options
    $('p.mult_entries select').each(function(){
            vals += $(this).val();
    });
    $("p.mult_entries:hidden:first").fadeIn("slow", function() {
            $(this).find(('select').attr('id').indexOf('other_pet_types') > 0).each(function(){
            console.log($(this).val()); //as expected prints nothing - need to iterate through the options of the above select
                //once i extract the correct values, iterate through new select box and use inArray to remove options where that value already exists in one of previous select boxes
        });
    });

Answer 1

我快速创建了一个有效的jsFiddle based on your description。它不是构建一个单独的数组，而是迭代选择选项。您可能需要添加逻辑以更改选择并重新启用您之前的选择。您可以使用 jQuery 的 .data() 函数来存储值，以便在更改后检索它......或者您可以将其保存到 cookie。不过，这应该可以帮助您入门。

Answer 2

您构建阵列的方式是错误的。您将其构建为字符串，而不是数组。这应该有效：

$('p.mult_entries select').each(function(){
  vals[vals.length] = $(this).val();
});

您找到合适的选择框的方式可以变成一个选择器而不是许多函数：

$(this).children("select[id^=other_pet_types]").each(function(){
  //do stuff here
});