附加选项到选项对象

jQuery - Append Option to Option object

本文关键字：选项 对象      更新时间：2023-09-26

我有两个选择框。第一个选择框会改变第二个选择框。第二种方法可以包含一组可变选项。

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

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和after。Append在最后一个选项中添加一个新选项。After导致jQuery错误。知道我怎么做吗?

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

首先，您要添加option标记，并使用关闭label标记，它应该是:

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

其次，使用您拥有的代码，它将在每个现有选项之后附加新选项(因为optionList是所有现有option元素的数组)。

相反，你应该把它附加到select元素，像这样: 
$('select[name="location"]').append(html);

$('选择[name = "位置"]选项");选择选项是选择的一部分。所以当你执行$(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(":").parent () .append (html);之前

第二个选项性能较差。

optionList.push(html)没有工作，因为optionList是一个jquery封装的选项数组(每个都是jquery封装的选项)，而不是document.forms中的select选项列表。
optionList.push($(html))之所以有效，是因为您使用jQuery包装了原始DOM元素"html"，因此您只是向optionList添加了另一个jQuery包装的选项。如果您使用optionList.add($(html))，则可以保存一个字符(并且更加jquery化)。然而，这两种方法都只会将"html"元素添加到optionList集合中;它实际上不会将"html"添加到DOM中。

最后，两个边注…首先，像你在循环中所做的那样追加是一个非常糟糕的主意;在每次通过循环时，您都会触及DOM，并触发重新绘制。您最好创建一个选项数组，而不是像这样做jQuery.fn.append.apply($('选择[name = "位置"]),objectArray);这只会在页面上点击一次，并且只会触发一次重绘。详见http://www.learningjquery.com/2009/03/43439-reasons-to-use-append-correctly

第二，$(optionList)是冗余的，会消耗一些性能。optionList已经是一个jQuery对象-即$('select[name="location"] option')。$(optionList)调用jQuery构造函数，只是为了让它意识到optionList已经是一个jQuery对象，然后在内部将你使用的$(optionList)转换为jQuery，实际上只是使用optionList。

相关文章：