web-dev-qa-db-fra.com

Comment supprimer/masquer les options de sélection de la liste de sélection

J'ai une liste de sélection comme celle-ci:

<select id="selectlist" name="selectproduct" >
    <option value=""> --- Select product  --- </option>
    <option value="1">Product 1</option>
    <option value="2">Product 2</option>
    <option value="3">Product 3</option>
    <option value="4">Product 4</option>
</select>

Malheureusement, je ne peux pas l'éditer ... Il existe une méthode qui me permet de masquer l'option "Produit 4" par défaut?.

javascriptselecthideoption
10
user2132234

Pour le cacher, enveloppez-le avec une balise span.

$( "#selectlist option[value=4]" ).wrap( "<span>" );

Pour l'afficher, décompressez la balise span si elle en a une.

if ( $( "#selectlist option[value=4]" ).parent().is( "span" ) ){
    $( "#selectlist option[value=4]" ).unwrap();
}
9
walterquez

l'utilisation de css pour masquer les options n'est pas prise en charge dans IE. Vous devez donc mettre à jour la liste options elle-même.

Essayez quelque chose comme

$('#selectlist option[value=4]').remove();

Démo: Fiddle

ou si vous voulez l'activer plus tard

var sel = $('#selectlist');
var opts = sel.find('option');

$(':checkbox').click(function(){
    sel.empty().append(this.checked ? opts : opts.filter('[value!=4]'));
}).click()

Démo: Fiddle

5
Arun P Johny

Vous pouvez masquer l'option en utilisant la ligne suivante include dans les scripts.

    $("#selectlist option[value='4']").hide();

Et si vous souhaitez afficher à nouveau cette option, utilisez la ligne suivante.

   $("#selectlist option[value='4']").show();
2
sandeepghuge141

Pour gagner du temps, veuillez lire la réponse suivante.

OK, j’ai cherché quelques heures et j’ai remarqué qu’il n’y avait NO WORKING WAY que de "cacher" visibilité à masquer ou style = "display: none".

Ma dernière approche est la suivante: 1. Créez un tableau pour stocker toutes les options de la liste déroulante . 2. Utilisez une méthode pour mettre à jour dynamiquement la liste déroulante en fonction de ce que vous voulez afficher.

Voilà, si vous voulez utiliser une liste déroulante sans utiliser aucune bibliothèque 

1
johnnyman

Vous pouvez "masquer" l'option en la déplaçant vers un élément de sélection masqué ou un fragment de document mis en cache, puis en la déplaçant lorsque vous souhaitez l'afficher:

var selectTool = (function() {
  var frag = document.createDocumentFragment();
  return {
    hideOpt: function (selectId, optIndex) {
      var sel = document.getElementById(selectId);
      var opt = sel && sel[optIndex];
      console.log(opt);

      if (opt) {
        frag.appendChild(opt);
      }
    },

    showOpt: function (selectId) {
      var sel = document.getElementById(selectId);
      var opt = frag.firstChild;
      if (sel && opt) {
        sel.appendChild(opt);
      }
    }
  }
}());

Ensuite, vous pouvez masquer la 4ème option comme:

<input type="button" value="Hide option" onclick="
  selectTool.hideOpt('selectlist',4);
">

et montrez-le encore en utilisant:

<input type="button" value="Show option" onclick="
  selectTool.showOpt('selectlist');
">

Tous jouent au code bien sûr, mais vous devriez avoir quelques idées. Si vous souhaitez stocker de nombreuses options, vous aurez besoin d'un moyen de les référencer afin de les stocker dans un objet avec une forme de schéma de référencement.

1
RobG

voir ce lien

http://jsfiddle.net/DKKMN/

<select id="selectlist" name="selectproduct" >
 <option value=""> --- Select product  --- </option>
 <option value="1">Product 1</option>
 <option value="2">Product 2</option>
 <option value="3">Product 3</option>
 <option value="4" id="i">Product 4</option>
</select>


#i{display:none;}

créer un identifiant et le rendre invisible

0
user2028750

Je suppose que vous utilisez aussi JQuery.

$("#selectlist option[value='option4']").remove();
0
sla55er

si vous souhaitez supprimer une option de la liste de sélection, vous pouvez utiliser ce code:

<script type="text/javascript">
    $(window).bind("load", function() {    
        $('#select_list_id option[value="AB"],option[value="SK"]').remove();
    });
</script>
0
sandeep kumar

d'ajouter l'enfant sous la liste des options à l'aide d'un script Java.

`var option = document.createElement("option");
 option.text = "All Users";
 option.value = "all_user";
 var select = document.getElementById("log_user_type");
 select.appendChild(option);`
0
sandeepghuge141

Essayez de désactiver cette option avec l'attribut disabled.

<select id="selectlist" name="selectproduct" >
 <option value=""> --- Select product  --- </option>
 <option value="1">Product 1</option>
 <option value="2">Product 2</option>
 <option value="3">Product 3</option>
 <option value="4" disabled="disabled">Product 4</option>
</select>

Vérifier démo

0
Chirag Vidani