jQuery - Anexar Opção ao objeto Option - javascript, jquery

Eu tenho 2 caixas de seleção. A primeira caixa de seleção altera a segunda. O segundo pode ter um pequeno conjunto de opções de variáveis.

O que fiz foi quando a página carrega, salvo as opções como uma variável.

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

Quando a primeira caixa de seleção muda. Em seguida, faço algo como a seguir correspondendo o valor da primeira caixa de seleção a uma instrução switch e, em seguida, eliminando e adicionando novas opções à caixa de seleção 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;

Tudo isso funciona bem.

O que eu preciso fazer agora é adicionar uma opção à optionList. Eu tentei anexar e depois. Append adiciona uma nova opção dentro da última opção. Depois causa um erro do jQuery. Alguma ideia de como eu faço isso?

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

Respostas:

1 para resposta № 1

Em primeiro lugar, você está anexando um option tag, com um fechamento label tag, deve ser:

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

Em segundo lugar, com o código que você tem, ele acrescentará sua nova opção após cada opção existente (como optionList é uma matriz de todos os existentes option elementos).

Em vez disso, você deve apenas anexá-lo ao select elemento, assim:

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

---

0 para resposta № 2

$ ("selecione [nome =" local "] opção"); está selecionandoas opções que fazem parte dessa seleção. Portanto, ao fazer $ (optionList) .append (html) ;, você está acrescentando "html" a cada opção na lista de resultados.

Pessoalmente, eu normalmente faria algo como:

var $ mySelect = $ ("selecione [nome =" local "]"); var optionList = $ mySelect.find ("opção"); ... $ mySelect.append (html);

mas você também pode fazer algo assim:

var optionList = $ ("selecionar [nome =" local "] opção"); ... optionList.filter (": primeiro"). parent (). append (html);

A segunda opção tem menos desempenho.

optionList.push (html) não funcionou porque optionList é um array de opções empacotado em jQuery (cada uma uma opção empacotada em jQuery), não uma lista select de opções em document.forms.
optionList.push ($ (html)) funcionou porque você envolveu o elemento DOM bruto "html" com jQuery e, portanto, estava apenas adicionando outra opção embrulhada por jQuery em optionList. Você poderia salvar um caractere (e ser um pouco mais jQueryish) se em vez disso, fizesse optionList.add ($ (html)). No entanto, qualquer um deles adicionaria apenas o elemento "html" à coleção optionList; na verdade, não adicionaria "html" ao DOM.

Por último, duas notas laterais ... Primeiro, anexar como você está fazendo nesse loop é uma ideia realmente ruim; você está acessando o DOM e também acionando um redesenho, a cada vez que passa pelo loop. É muito melhor criar uma série de opções, do que fazer algo como jQuery.fn.append.apply ($ ("select [name =" location "]"), objectArray); Isso acerta apenas uma vez na página e dispara apenas uma repintura. Vejo http://www.learningjquery.com/2009/03/43439-reasons-to-use-append-correctly para mais.

Em segundo lugar, $ (optionList) é redundante e custa a vocêalgum desempenho. optionList já é um objeto jQuery - ou seja, $ ("select [name =" location "] option"). $ (optionList) invoca o construtor jQuery, apenas para perceber que optionList já é um objeto jQuery e, internamente, está convertendo seu uso de $ (optionList) em jQuery, na verdade, apenas usando optionList.

---