Masquer les options dans une liste de sélection à l'aide de jQuery

Question

J'ai un objet avec des paires d'options clé / valeur que je souhaite masquer / supprimer d'une liste de sélection. Aucun des sélecteurs d'options suivants ne fonctionne. Qu'est-ce que je rate?

 $.each(results['hide'], function(name, title) {     	  	 		
  $("#edit-field-service-sub-cat-value option[value=title]").hide();
  $("#edit-field-service-sub-cat-value option[@value=title]").hide();
});
 

Answer 1

Pour ce que ça vaut, le deuxième formulaire (avec le `` ) n’existe pas dans jQuery 1.3. Le premier ne fonctionne pas parce que vous êtes enceinte apparemment interpolation variable. Essayez ceci :

Notez que cela cassera probablement de diverses manières hideux si `` contient les métacaractères sélecteur jQuery.

Answer 2

Vous ne pouvez pas faire ce x-browser. Si je me souviens, c.-à-d. Le plus simple est de conserver une copie clonée de la sélection avant de supprimer des éléments. Cela vous permet de supprimer facilement les éléments manquants, puis de les annexer.

Answer 3

J’ai trouvé une meilleure façon, et c’est très simple :

Pour afficher de nouveau, il suffit de trouver cette option (non étendue) et `` .

Il a été testé sur Chrome et Firefox.

Answer 4

Voici mon tour, probablement un peu plus rapide en raison de méthodes natives DOM

 $.each(results['hide'], function(name, title) {                     
    $(document.getElementById('edit-field-service-sub-cat-value').options).each(function(index, option) {
      if( option.value == title ) {
        option.hidden = true; // not fully compatible. option.style.display = 'none'; would be an alternative or $(option).hide();
      }
    });
});
 

Answer 5

Il PEUT être fait de la croix-navigateur; il faut juste un peu de programmation personnalisée. Veuillez voir mon violon à http://jsfiddle.net/sablefoste/YVMzt/6/. Il a été testé pour fonctionner dans Chrome, Firefox, Internet Explorer et Safari.

En bref, j'ai un champ caché, #optionstore, qui stocke la matrice de façon séquentielle (puisque vous ne pouvez pas avoir des Tableaux Associatifs en JavaScript). Puis, quand vous changer de catégorie, il analyse les options existantes (la première fois seulement) écrit en #optionstore, efface tout, et met en arrière que ceux associés à la catégorie.

NOTE: j'ai créé cela pour différentes valeurs de l'option à partir du texte affiché à l'utilisateur, de sorte qu'il est très flexible.

Le code HTML:

<p id="choosetype">
    <div>
        Food Category:
    </div>
    <select name="category" id="category" title="OPTIONAL - Choose a Category to Limit Food Types" size="1">
        <option value="">All Food</option>
        <option value="Food1">Fruit</option>
        <option value="Food2">Veggies</option>
        <option value="Food3">Meat</option>
        <option value="Food4">Dairy</option>
        <option value="Food5">Bread</option>
    </select>
    <div>
        Food Selection
    </div>
    <select name="foodType" id="foodType" size="1">
        <option value="Fruit1" class="sub-Food1">Apples</option>
        <option value="Fruit2" class="sub-Food1">Pears</option>
        <option value="Fruit3" class="sub-Food1">Bananas</option>
        <option value="Fruit4" class="sub-Food1">Oranges</option>
        <option value="Veg1" class="sub-Food2">Peas</option>
        <option value="Veg2" class="sub-Food2">Carrots</option>
        <option value="Veg3" class="sub-Food2">Broccoli</option>
        <option value="Veg4" class="sub-Food2">Lettuce</option>
        <option value="Meat1" class="sub-Food3">Steak</option>
        <option value="Meat2" class="sub-Food3">Chicken</option>
        <option value="Meat3" class="sub-Food3">Salmon</option>
        <option value="Meat4" class="sub-Food3">Shrimp</option>
        <option value="Meat5" class="sub-Food3">Tuna</option>
        <option value="Meat6" class="sub-Food3">Pork</option>
        <option value="Dairy1" class="sub-Food4">Milk</option>
        <option value="Dairy2" class="sub-Food4">Cheese</option>
        <option value="Dairy3" class="sub-Food4">Ice Cream</option>
        <option value="Dairy4" class="sub-Food4">Yogurt</option>
        <option value="Bread1" class="sub-Food5">White Bread</option>
        <option value="Bread2" class="sub-Food5">Panini</option>
    </select>
    <span id="optionstore" style="display:none;"></span>
</p>

JavaScript/jQuery:

$(document).ready(function() {
    $('#category').on("change", function() {
        var cattype = $(this).val();
        optionswitch(cattype);
    });
});

function optionswitch(myfilter) {
    //Populate the optionstore if the first time through
    if ($('#optionstore').text() == "") {
        $('option[class^="sub-"]').each(function() {
            var optvalue = $(this).val();
            var optclass = $(this).prop('class');
            var opttext = $(this).text();
            optionlist = $('#optionstore').text() + "@%" + optvalue + "@%" + optclass + "@%" + opttext;
            $('#optionstore').text(optionlist);
        });
    }

    //Delete everything
    $('option[class^="sub-"]').remove();

    // Put the filtered stuff back
    populateoption = rewriteoption(myfilter);
    $('#foodType').html(populateoption);
}

function rewriteoption(myfilter) {
    //Rewrite only the filtered stuff back into the option
    var options = $('#optionstore').text().split('@%');
    var resultgood = false;
    var myfilterclass = "sub-" + myfilter;
    var optionlisting = "";

    myfilterclass = (myfilter != "")?myfilterclass:"all";

    //First variable is always the value, second is always the class, third is always the text
    for (var i = 3; i < options.length; i = i + 3) {
        if (options[i - 1] == myfilterclass || myfilterclass == "all") {
            optionlisting = optionlisting + '<option value="' + options[i - 2] + '" class="' + options[i - 1] + '">' + options[i] + '</option>';
            resultgood = true;
        }
    }
    if (resultgood) {
        return optionlisting;
    }
}