style.display='none' ne fonctionne pas sur les balises d'option dans google chrome, mais il le fait dans firefox

ok, voici un exemple de code qui illustre le problème.
si je clique sur le bouton firefox, la première option disparaît.
si je clique sur le bouton dans le navigateur chrome, il ne se passe rien, ou plutôt si je inspecter la première option, il ne l'attribut "style='display:none'", mais l'option elle-même sur la page html n'est pas caché.

<form>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<input type="button" onclick="document.getElementsByTagName('option')[0].style.display='none'" value="hide option 1">
</form>

pourquoi ne pas ce travail dans chrome?

Fonctionne sur Chrome maintenant. C'est à dire est la dernière comme d'habitude, toujours de nous donner des maux de tête inutiles.

InformationsquelleAutor user280109 | 2010-02-24

23

La solution est de supprimer le option éléments de réponse à votre événement et de les ajouter si et quand ils sont nécessaires. Autant que je me souvienne, c'est à dire ne vous permettra pas de régler le display à none sur option éléments. Je vous conseille de stocker les éléments supprimés dans un tableau, de sorte que vous pouvez facilement ajouter de nouveau.
- merci pour les conseils Russ, je crois que je vais essayer ça
- Fait intéressant, Chrome Canary (au moins 40.0.2179.0) respecte display:none sur les options. Je pense que firefox ne ainsi.
- Firefox ne sera pas d'abord l'élément, mais vous pouvez toujours sélectionner les éléments cachés avec votre clavier (à quel point ils seront affichées). Vous pouvez le tester ici: jsfiddle.net/gefz928j. Ligne de fond est que vous ne devriez pas utiliser display:none à supprimer options dans une liste.
- Vous devriez lorsque la suppression est temporaire. Retrait de la display:none est beaucoup plus rapide que le rattachement de l'ensemble de la liste.
- Chrome prend désormais en charge display:none dans la version release. Intéressant, cependant, que <option> ne serait pas se cacher lorsque la valeur d'affichage aucun. Personnellement, je pense qu'il ne doit pas suivre les mêmes règles que pratiquement chaque autre élément dans le dom, même si c'est un navigateur d'élément de formulaire.
InformationsquelleAutor Russ Cam
7

Vous avez probablement supprimer la <option> au lieu de 'cacher' il. Si ce n'est pas une solution pour vous, essayez de désactiver la fonction.
```
document.getElementsByTagName('option')[0].disabled='disabled'
```
PS: Vous pourriez vouloir reconsidérer l'aide de getElementsByTagName('option'), peut être source de confusion si vous avez plus de <select> éléments.
- a seulement à l'aide de la commande comme un simple exemple pour illustrer le problème
InformationsquelleAutor o.k.w
2
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
removeIt = function()
{
    var theSelect = document.getElementById("theSelect");
    var theOption = document.getElementById("theOption");
    theSelect.removeChild(theOption);
};
</script>
</head>
<body>
<select id="theSelect">
<option>1</option>
<option id="theOption">2</option>
<option>3</option>
</select>
<input type="button" onclick="removeIt()" value="remove it!"/>
</body>
</html>
```
Je me suis vite de travailler, simplement en retirant de son parentNode... évidemment, cela va être un hack.

Je vais essayer de trouver une meilleure solution pour vous =)

En passant, bienvenue à Débordement de Pile
- grâce itzwwarty, mais je ne veux pas l'effacer, il suffit de le cacher
- Il n'est pas de le supprimer. C'est tout simplement le retirer à partir du nœud parent. Vous pouvez ensuite appeler theSelect.appendChild(option); ..Même si ce serait probablement la vis de l'ordre [dans mon exemple, il deviendrait 1, 3, 2] Encore en train de penser à une solution.
- Mise à jour: Malheureusement, je ne peux pas penser à une meilleure manière. Peut-être, lorsque vous faites d'abord la méthode removeChild() option, vous pouvez copier childNodes à un autre tableau, de sorte que vous pouvez maintenir l'ordre. Puis, quand vous reappend, vous avez à tout supprimer et reappend tout. Inefficace, mais je ne peux pas penser à une meilleure façon >_>
- oui je pense que je vais devoir essayer quelque chose comme ça, merci
InformationsquelleAutor Warty
1

La question est plutôt pourquoi cette œuvre dans n'importe quel navigateur?

Les options ne sont pas utilisés comme éléments dans la page, elles contiennent les informations à afficher dans l'élément select. Certains navigateurs vous permettent d'appliquer des styles pour les options, mais en général, vous ne pouvez pas vraiment s'attendre de la croix-navigateur de soutien pour tous les styles à tous.

Si vous voulez garder une option s'affiche, il vous suffit de le retirer de la sélection.
- Pourquoi le downvote? Si vous ne dites pas ce que c'est que vous n'aimez pas, il ne peut pas améliorer la réponse.
- Selon les spécifications HTML propriété d'affichage est applicable à tous les éléments, y compris à option et de "optgroup".
- Otkidach: Oui, en HTML, mais ce n'est plus le HTML, c'est des objets dans les DOM. Vous devez remplacer l'ensemble de sélectionner l'élément avec le nouveau code HTML pour obtenir analysé de nouveau.
InformationsquelleAutor Guffa
1

Pour la suppression d'une option de sélectionner le formulaire peut être utilisé jQuery $().eq().remove() ou $().supprimer().

Similaire a été mon la suppression d'une ligne de tableau de tableau:
```
$('form table tr').eq(1).remove();
```
où:
```
$('form table tr')
```
dire, qui a supprimé l'élément sera la ligne de la table (tr) à partir du tableau ci-joint de forme (forme de tableau).
```
eq(1)
```
dire que enlevée sera le deuxième élément (élément avec le numéro d'index 1)
```
remove()
```
dire que l'élément sera supprimé.

Mais quand ce devrait être utilisé sur option, puis tout le nécessaire serait (par exemple):
```
$('select option[value="1"]').remove();
```
parce que c'est plus simple pour trouver l'option par la valeur que par le numéro d'index (à moins que vous ayez plus de ioption avec la même valeur, mais c'est un non-sens, d'avoir des options). À l'aide de l'indice est bon si vous n'avez pas toute autre chose que vous pouvez utiliser pour trouver de l'élément supprimé.

Aussi, vous pouvez, bien sûr, ajouter un formulaire nom ou le nom du formulaire et sélectionnez un nom (ou un id ou une classe) pour l'élément d'identification
```
$('form[name="date"] selection[name="day"] option[value="1"]').remove();
$('form#date selection#day option[value="1"]').remove();
```
mais la première option est mieux et plus logique, en raison des processus côté serveur, où vous devez utiliser l'attribut nom au lieu id ou classe.
- $('select option[value="1"]').remove(); travaille
InformationsquelleAutor Václav

Que ma solution est (asp.net), je vais essayer de le faire de cette façon.

Créer un dropdowlist seront tous ListItems
À l'aide de javascript pour ajouter ou supprimer des ListItems (Remarque: l'option ajouter besoin de la même valeur et le texte à l'asp:dropdownlist éléments)

function removeOptionSelected() {
var ddl = document.getElementById('ddl_DropList');
var i;
for (i = ddl.length - 1; i >= 0; i--) {
ddl.remove(i);
}
}
function addOptions3() {
removeOptionSelected();
var ddl = document.getElementById('ddl_DropList');
var elOptNew = document.createElement('option');
elOptNew.text = 'Monthly Top Producer(Project)';
elOptNew.value = 'GCE';
try {
ddl.add(elOptNew, null); //standards compliant; doesn't work in IE
}
catch (ex) {
ddl.add(elOptNew); //IE only
}
elOptNew = document.createElement('option');
elOptNew.text = 'Monthly Top Leaders - DD';
elOptNew.value = 'DRE';
try {
ddl.add(elOptNew, null); //standards compliant; doesn't work in IE
}
catch (ex) {
ddl.add(elOptNew); //IE only
}
elOptNew = document.createElement('option');
elOptNew.text = 'Monthly Top Leaders - SDD';
elOptNew.value = 'DRESDD';
try {
ddl.add(elOptNew, null); //standards compliant; doesn't work in IE
}
catch (ex) {
ddl.add(elOptNew); //IE only
}
elOptNew = document.createElement('option');
elOptNew.text = 'Monthly Top Leaders - GD';
elOptNew.value = 'GRE';
try {
ddl.add(elOptNew, null); //standards compliant; doesn't work in IE
}
catch (ex) {
ddl.add(elOptNew); //IE only
}
}

InformationsquelleAutor nguyencaoan

Je sais que c'est vieux maintenant, mais vous pourrait - surtout si vous êtes en utilisant jQuery changement parent.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo Page</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
function sourceListChange() {
var oVisible = $('#destList');
var newCategory = $( "#sourceList" ).val()||'';
var oToShow = $();
oHiddenDestList.append(oVisible.find('option'));
if (newCategory) {
oToShow = oHiddenDestList.find('.'+newCategory);
}           
if (oToShow.length==0) {
oVisible.append (oHiddenDestList.find('.NA'));
} else if (oToShow.length!=1) {
oVisible.append (oHiddenDestList.find('.SELECT'));
}
oVisible.prop('selectedIndex', 0);
oVisible.append (oToShow);
}
$(document).ready(function() {
sourceListChange();
});
var oHiddenDestList = $(document.createElement('select'));
</script>
<style>
</style>
</head>
<body>
Select a parent group:
<select id="sourceList" onchange="sourceListChange()">
<option class="SELECT" value="" selected disabled>Please Select</option>
<option value="veg">Vegetables</option>
<option value="fruit">Fruit</option>
</select>
<select id="destList">
<option class="SELECT" value="*" selected disabled>Please Select</option>
<option class="NA" value="" selected disabled>Not Applicable</option>
<option class="fruit">Apple</option>
<option class="fruit">Bannana</option>
<option class="veg">Carrot</option>
<option class="veg">Pea</option>
</select>       
</body>
</html>

InformationsquelleAutor Denzil Newman

Solution:

var ua = navigator.userAgent.toLowerCase();
var check = function(r) { return r.test(ua);};
var isChrome = check(/chrome/);
`
var f=document.getElementById('select_tag_id');
f.options[i].style.display='none';
if (isChrome) f.size=2;

La boîte de sélection changé de taille 2 (multiples), mais de travail.
Cette astuce ne fonctionne pas sous safari 🙁

InformationsquelleAutor Attila Molnár

Vous devez vous connecter pour publier un commentaire.