Ajuda na programação, respostas a perguntas / Javascript / Como a melhor e mais rápida maneira de ocultar a opção não é necessária com JavaScript - javascript, jquery, html

Como a melhor e mais rápida maneira de ocultar a opção não é necessária com JavaScript - javascript, jquery, html

Eu tenho HTML selecionar com várias opções e quero ocultar e mostrar quando necessário, como exemplo aqui meu HTML:

<select>
<option value="0">A</option>
<option value="1">B</option>
<option value="2">C</option>
<option value="3">D</option>
<option value="4">E</option>
<option value="5">F</option>
<option value="6">G</option>
<option value="7">H</option>
</select>

Agora eu só quero mostrar a opção E e ocultar outrasopção. Mas, em outro caso, talvez eu queira mostrar tudo. Eu sei que em JavaScript podemos esconder uma opção pelo seu valor. Mas eu quero saber se eles são a melhor maneira de esconder e mostrar o desempenho também (com Javascript)?

Obrigado.

Respostas:

3 para resposta № 1

Você tem atributo oculto para isso

var myselectoptions=document.getElementById("myselect").options;

function hideoptions(optionObject,optiontohide){
for (index = 0; index < optiontohide.length; ++index) {
optionObject[optiontohide[index]].setAttribute("hidden","true");
}
}

function showoptions(optionObject,optiontoshow){
for (index = 0; index < optiontoshow.length; ++index) {
optionObject[optiontoshow[index]].removeAttribute("hidden");
}
}

hideoptions(myselectoptions, [6,7,8]);      // hide F,G,H
showoptions(myselectoptions, [8]);         // show H

<select id="myselect">
<option value="0" >Select</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
<option value="5">E</option>
<option value="6">F</option>
<option value="7">G</option>
<option value="8">H</option>
</select>

Para suporte no IE <11, adicione esta linha ao css: [oculto] {display: nenhum; }

O Jquery também pode ser usado, mas acho que o código Javascript simples seria mais rápido, pois o Jquery realiza muitas verificações em uma função.

0 para resposta № 2

Você pode tentar assim: funciona bem:

 $("#btnE").click(function () {
$("#select option").show();
$("#select option[value!=4]").hide();
});

$("#btnB").click(function () {
$("#select option").show();
$("#select option[value!=1]").hide();
});

$("#btnAll").click(function () {
$("#select option").show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="select">
<option value="">Select</option>
<option value="0">A</option>
<option value="1">B</option>
<option value="2">C</option>
<option value="3">D</option>
<option value="4">E</option>
<option value="5">F</option>
<option value="6">G</option>
<option value="7">H</option>
</select>
<br /><br />

<input type="button" value="Show Only E" id="btnE" />
<input type="button" value="Show Only B" id="btnB" />
<input type="button" value="Show All" id="btnAll" />

0 para resposta № 3

//for hiding only single option from the select
$("select").children("option[value="1"]").hide();

//for showing only one option from the select
$("select").children("option").hide();

$("select").children("option[value="1"]").show();

Seja mais específico para selecionar o elemento, pois isso funcionará em toda a lista de seleção e pode causar erros; portanto, use $ ("select: class") etc ...

0 para a resposta № 4

Você pode se esconder usando .hide() função

jQuery("select").children("option[value="4"]").hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<select>
<option value="0">A</option>
<option value="1">B</option>
<option value="2">C</option>
<option value="3">D</option>
<option value="4">E</option>
<option value="5">F</option>
<option value="6">G</option>
<option value="7">H</option>
</select>