Ocultar opção de seleção no IE usando jQuery

Atualmente estou usando o jQuery para ocultar / mostrar opções de seleção usando o código a seguir.

$("#custcol7 option[value=" + sizeValue + "]").hide(); 

Isso funciona bem no Firefox, mas não faz bem em outros navegadores. Como ocultar opções do select no Chrome, Opera e IE?

Acabei de me deparar com isto e em vez de clonar toda a selecção várias vezes, acabei de replace as opções que precisam de ser escondidas com elementos de span e ocultando as extensões (embora o navegador não as visualmente visualmente de qualquer forma, penso) – pode ser necessário mude seu código (se complexo) para iterar através dos spans para lógica complexa.

Os spans armazenam uma referência à option e substituem a si mesmos quando precisam ser mostrados.

Este código pode obviamente ser refatorado e aprimorado.

http://fiddle.jshell.net/FAkEK/12/show/

EDIT # 2 (USE ISTO EM VEZ): Ocorreu-me que em vez de fazer toda essa porcaria de clone / reference / replace, apenas coloque a opção com um span, esconda o span, e no show apenas substitua o span com a opção novamente. .

http://fiddle.jshell.net/FAkEK/25/show/

Eu acho que meder forneceu uma resposta válida e aqui ela é levemente alterada para refletir o que funciona para mim:

 $.fn.optVisible = function( show ) { if( show ) { this.filter( "span > option" ).unwrap(); } else { this.filter( ":not(span > option)" ).wrap( "" ).parent().hide(); } return this; } 

Testado com (longa duração BrowserStack):

  • Windows XP: IE 6.0, Firefox 3.0, Safari 4.0, Opera 10.0, Chrome 14.0
  • Windows 8: IE 10.0 Metro
  • iOS 3.2 (iPad), iOS 6.0 (iPhone 5)
  • Android 1.6 (Sony Xperia X10)

jsfiddle

Você não, não é suportado no IE (e, presumivelmente, não no Chrome ou no Opera). Você teria que remover as opções completamente e adicioná-las novamente mais tarde, se quiser que elas fiquem realmente invisíveis. Mas na maioria dos casos, um simples disabled="disabled" deve ser suficiente e é muito mais simples do que lidar com a remoção e adição de opções.

tente desappend (). você pode reconectá-lo mais tarde, se necessário, usando append () ou insertAfter ()

Para remover as opções, use:

 var opt=$("option").detach(); 

Para mostrar opções use:

 opt.appendTo( "select" ); 

Apenas excluí-lo e armazená-lo em um var em seu JavaScript. Você pode criar o novo object quando precisar mais tarde.

Caso contrário, tente o atributo disabled mencionado acima.

 /** * Change visibility of select list option elements * @param {boolean} stateVal show hidden options if true; hide it otherwise. If not setted then toggle visibility, based on it's current state */ $.fn.toggleOptionVisibility = function (stateVal) { var isBool = typeof stateVal === "boolean"; return this.each(function () { var $this = $(this); if (isBool) { if (stateVal) $this.filter("span > option").unwrap(); else $this.filter(":not(span > option)").wrap("").parent().hide(); } else { $this.filter("span > option").toggleOptionVisibility(true); $this.filter(":not(span > option)").toggleOptionVisibility(false); } }); }; 

a maneira que você fez isso deve funcionar em cromo, mas nvm.Aqui está outra maneira

 select = $('#custcol7'); select.find('option[value=["'+sizeValue +'"]').remove(); 

e se você quiser mostrá-lo novamente:

 select.append(''); 

Funciona perfeitamente em todos os navegadores e no seu código realmente simples. O problema é que se você quiser esconder várias opções é mais digitação … mas isso pode ser resolvido colocando-as em variables ​​se elas não mudarem dinamicamente assim:

 var options = ''; select.append(options); 

Desta forma, se você tem que remover / acrescentar em vários lugares, você só digitou as opções uma vez. Espero que eu tenha dado outra opção interessante. Cumprimentos.

Existe também o método .load:

 s_parent.change(function(){ s_child.load('./fetch_options.php",{'v',s_parent.val()}); } 

O script ‘fetch_options.php’ simplesmente imprime as tags de opção com base na fonte de dados que você usa e no valor pai (s) sendo passado (s).

Minha opinião é um pouco diferente de outras respostas.

O objective não é ocultar as opções, mas apenas desativá-las (para manter a interface do usuário consistente).

Meu cenário:

Eu tenho várias seleções em um formulário e quando um usuário seleciona uma opção em uma das seleções, as outras seleções devem desativar essa opção e vice-versa. O usuário é impedido de selecionar a mesma opção que já está selecionada. Nós normalmente desabilitamos a opção, mas para o IE 7, que não suporta isso. O usuário também recebe uma opção para adicionar novos seleções.

Solução:

Carregando :

Se o navegador for o IE7, ao preencher os selects e desativar as opções já selecionadas em outras seleções, adicionarei um atributo personalizado à opção (” data-ie7-disabled “) e também alterarei a cor das opções desativadas para ” #cccccc ‘(que é a cor padrão para opções desativadas). Isso faz com que a interface do usuário pareça igual entre os navegadores.

Em mudança :

Eu salvo a opção anterior em uma variável local (isso é salvo em foco).

Quando um usuário tenta alterar uma opção

  1. O usuário seleciona uma nova opção completa que não está selecionada em nenhuma outra lista suspensa. Em seguida, faço um loop por outras seleções e altero a cor e adiciono um atributo personalizado a essa opção selecionada em outras seleções.

  2. Quando o usuário seleciona uma opção que já está selecionada (a opção que esmaeceu a cor). Eu verifico se a opção tem este atributo personalizado primeiro. Se tiver então eu simplesmente reverti a opção para a anterior com uma mensagem de erro dizendo “Esta opção já está selecionada ou BLAH BLAH”.

  3. Quando o usuário altera sua opção existente para uma nova opção que não está selecionada em nenhuma outra lista suspensa. Volto a percorrer todas as outras opções de seleção e removo a cor e também o atributo personalizado.

Espero que isto ajude.

Você pode usar através de combinações de var $opt=$('select>option').clone() e $('select option[value="'+val+'"').remove() . Há outro exemplo: tente isso. https://jsfiddle.net/sherali/jkw8fxzf/12/

 var $secondOption= $('#second-choice>option').clone(); $("#first-choice").change(function() { var userSelected = $(this).val(); $('#second-choice').html($secondOption); $('#second-choice option[value="'+userSelected+'"').remove() }); 

Você pode usar isto:

 $("#custcol7 option[value=" + sizeValue + "]").css({display:'none'}); 

Funciona bem em todos os navegadores, exceto no Safari e no Opera. Estou procurando outra melhor solução 🙂

Você precisará removê-lo e adicioná-lo novamente ao Internet Explorer.

Remover:

 $("#custcol7 option[value=" + sizeValue + "]").remove(); 

Adicionar:

 $("#custcol7").append( "" ); 

Note que você precisa ter sizeValue também no texto da opção, para realmente ver algo.

Usando a solução fornecida por AuthorProxy, funciona bem para o IE, mas quando eu tento fazer um .val () na lista suspensa no Firefox eu recebo alguns valores funky que não fazem qualquer sentido. Eu modifiquei sua opção para include funcionalidades específicas do navegador, ocultar / mostrar trabalhos para o firefox.

 $.fn.toggleOptionVisibility = function (stateVal) { var isBool = typeof stateVal === "boolean"; return this.each(function () { var $this = $(this); if (navigator.userAgent.indexOf('MSIE') > -1 || navigator.userAgent.indexOf('Trident') > -1) { if (isBool) { if (stateVal) $this.filter("span > option").unwrap(); else $this.filter(":not(span > option)").wrap("").parent().hide(); } else { $this.filter("span > option").toggleOptionVisibility(true); $this.filter(":not(span > option)").toggleOptionVisibility(false); } } else { if (isBool) { $this.show(); } else { $this.hide(); } } }); }; 

Você também pode replace o html na seleção.

Html:

   

Jquery:

  $("#Button1").change(function () { $('#foo').html(''); }); 

Não é exatamente o que você quer, mas talvez ajude. Para dropdowns menores, é definitivamente mais fácil.

No IE 11 (Edge), o código a seguir está funcionando.

  $("#id option[value='1']").remove(); 

e para trás,

 $(' 

A solução de meder é o que eu escolhi para isso, mas com um pequeno ajuste para evitar que ela envolva uma opção em um intervalo que já estava em um intervalo:

 $.fn.hideOption = function() { this.each(function() { if (!$(this).parent().is('span')) { $(this).wrap('').hide(); } }); }; $.fn.showOption = function() { this.each(function() { var opt = $(this).find('option').show(); $(this).replaceWith(opt); }); };