Question

我有2个选择框。第一个选择框改变了第二个。第二个可以有一小组变量选项。

我所做的是当页面加载时我将选项保存为变量。

var optionList = $('select[name="location"] option');

第一个选择框更改时。然后，我执行以下操作，将第一个选择框的值与switch语句匹配，然后敲除并添加新选项以选择框2.

case 'add':
    $('select[name="location"] option').remove();
    $(optionList).each(function() {
        $('select[name="location"]').append($(this));
    });
    $('select[name="location"] option:not(option[value="cart"])').remove();
break;

一切正常。

我现在需要做的是为optionList添加一个选项。我试过追加和追加。 Append在最后一个选项中添加一个新选项。之后导致jQuery错误。知道我是怎么做的吗？

var html = '<option value="'+v+'">'+l+'</label>';
$(optionList).append(html); // Fails
$(optionList).after(html); // jQuery error line 3

Answer 1

首先，您要附加一个option标记，其标记为label，应为：

var html = '<option value="'+v+'">'+l+'</option>';

其次，使用您拥有的代码，它会在每个现有选项后添加新选项（因为optionList是所有现有option元素的数组）。

相反，您应该将其附加到select元素，如下所示：

$('select[name="location"]').append(html);

Answer 2

$（'select [name =“location”]选项'）;正在选择属于该选择的选项。因此，当你执行$（optionList）.append（html）;时，你将“html”附加到该结果列表中的每个选项。

就个人而言，我通常会做类似的事情：

var $mySelect = $('select[name="location"]');
var optionList = $mySelect.find('option');
...
$mySelect.append(html);

但您也可以这样做：

var optionList = $('select[name="location"] option');
...
optionList.filter(':first').parent().append(html);

第二种选择虽然性能较差。

optionList.push（html）不起作用，因为optionList是一个jQuery包装的选项数组（每个选项都是jQuery包装选项），而不是document.forms中选择的选项列表。
optionList.push（$（html））因为你用jQuery包装原始DOM元素“html”而工作，因此你只是在optionList中添加了另一个jQuery包装选项。如果您改为使用optionList.add（$（html）），则可以保存一个字符（并且更多一些jQueryish）。但是，其中任何一个都只会将“html”元素添加到optionList集合中;它实际上不会向DOM添加“html”。

最后，两个旁注......首先，像你在那个循环中做的那样追加是一个非常糟糕的主意;你每次都要通过循环击中DOM，并触发重绘。你可以更好地创建一系列选项，然后做类似的事情 jQuery.fn.append.apply（$（'select [name =“location”]'），objectArray）; 这只会在页面上进行一次点击，并且只触发一次重绘。有关详情，请参阅http://www.learningjquery.com/2009/03/43439-reasons-to-use-append-correctly。

其次，$（optionList）是多余的，会让您失去一些性能。 optionList已经是一个jQuery对象 - 即$（'select [name =“location”]选项'）。 $（optionList）调用jQuery构造函数，只是让它意识到optionList已经是一个jQuery对象，并且在内部它实际上只是使用optionList将你对$（optionList）的使用转换为jQuery。

jQuery - 将选项附加到Option对象

2 个答案: