web-dev-qa-db-fra.com

Options avec affichage: aucune non cachée dans IE

J'ai plusieurs options dans une sélection. J'ai trié les options et désactivé et masqué les options de duplication avec jQuery. Le code fonctionne bien dans chrome et firefox mais dans IE et safari, les options avec display: aucune ne sont encore affichées. 

Voici le jsfiddle du code:

<select>
  <option value="5797">34</option>
  <option value="5809">37</option>
  ... 
  <option value="5653">71</option>
  <option disabled="" selected="selected" value="53">Eye</option>
  <option disabled="disabled" style="display: none;" value="5441">52</option>
  <option disabled="disabled" style="display: none;" value="5443">52</option>
  ...
  <option disabled="disabled" style="display: none;" value="5431">51</option>
</select>

http://jsfiddle.net/7vUdb/

htmlinternet-explorerselect
25
MJQ

IE ne supporte pas style="display:none;" sur les tags <option>.

Votre seule option est de les supprimer, soit dans le cadre de la création du code HTML, soit via un script côté client.

32
freefaller

Si quelqu'un fait toujours face à ce problème, voici ma solution, cela peut être utile:

$('select.some-list option[id=someId]').attr('disabled', 'disabled').hide();

Ceci masque l'option dans tous les navigateurs et désactive si impossible, les options suivantes:) . Pour ramener l'option, n'oubliez pas de l'activer:

$('select.some-list option[id=someId]').removeAttr('disabled').show();
17
Gev

Vous pouvez utiliser detach() et remove() pour le faire.

3
Zhangjiang Huang

En développant la réponse de Zhangjiang Huang: Vous cachez en gros toutes les options, les détachez de la liste déroulante, puis vous rattachez celles que vous voulez.

JQuery:

(function(){
   // Cache List
   var options = $("select option");

   // Clear list
   options.detach();
   // Rebuild list
   options.not(".disabled").appendTo("select");
   // Set Default
   $("select").val("");
})();

HTML:

<select>
   <option value="">---Select One---</option>
   <option value="5797">34</option>
   <option value="5809">37</option>
    ... 
   <option value="5653">71</option>
   <option class="disabled" value="53">Eye</option>
   <option class="disabled"value="5441">52</option>
   <option class="disabled" value="5443">52</option>
   ...
   <option class="disabled" value="5431">51</option>
</select>

jsfiddle

2
Nick Cordova

Utilisez Js suivants pour masquer l’option tag 

<select id="selectlist">
      <option value="5797">34</option>
      <option value="5809">37</option>
       <option value="5653">71</option>
      <option  value="53">Eye</option>
      <option  value="5441">52</option>
      <option  value="5443">52</option>
      <option value="5431">51</option>
    </select>


$('#selectlist option[value=53]').hide();
$('#selectlist option[value=52]').hide();
$('#selectlist option[value=5443]').hide();

Réf: jsfiddle.net/p8Gmm/7 

Ou 

Ref: 

http://jsfiddle.net/chiragvidani/vhKdw/

1
Divya Bhalodiya

mes 2 cents sur une "vieille question", mais toujours une question pertinente.

Du côté serveur:

protected void Page_Load(object sender, EventArgs e)
{
   if (!IsPostBack)
   { //load subDropDownList all possible values [with an attribute for filtering] }
}

Côté client:

var optionList = null;
$(function(){
  if (!optionList)
  {
     optionList = new Array();
     $("[id$='subDropDownList'] option").each(function () {
         optionList.Push({value: $(this).val(), text: $(this).text(), filterID: $(this).data("filterid") }); 
      });
  } 

  $("[id$='mainDropDownList']").on("change", function (e) {
     var filterID = $(this).val();
     $("[id$='subDropDownList']").html("");

     $.each(optionList, function () {
        if (this.filterID == filterID)
          $("[id$='subDropDownList']").append($("<option></option>").val(this.value).html(this.text).data("filterid", this.filterID));
        });


  });

})

L'idée ici est du côté client que je charge toutes les valeurs dans un tableau, puis lors de l'événement change de la sélection principale, j'ajoute uniquement les options requises. J'espère que quelqu'un trouve cela utile.

1
Stephen
sort by disabled options. 

$("#addselect option").each(function (i, val) {
                if ($(this)[i].disabled) {
                    moveDown("selectId");
                }
                else {
                    moveUp("selectId");
                }
 }

   function moveUp(selectId) {
            var selectList = document.getElementById(selectId);
            var selectOptions = selectList.getElementsByTagName('option');
            for (var i = 1; i < selectOptions.length; i++) {
                var opt = selectOptions[i];
                if (!opt.disabled) {
                    selectList.removeChild(opt);
                    selectList.insertBefore(opt, selectOptions[i - 1]);
                }
            }
        }

        function moveDown(selectId) {
            var selectList = document.getElementById(selectId);
            var selectOptions = selectList.getElementsByTagName('option');
            for (var i = selectOptions.length - 2; i >= 0; i--) {
                var opt = selectOptions[i];
                if (opt.disabled) {
                    var nextOpt = selectOptions[i + 1];
                    opt = selectList.removeChild(opt);
                    nextOpt = selectList.replaceChild(opt, nextOpt);
                    selectList.insertBefore(nextOpt, opt);
                }
            }
        }
0
Namrata S Jain

La solution de @Gev est bonne, mais les options apparaissent toujours (même si elles sont désactivées), de sorte que le comportement est incohérent entre les navigateurs.

Vous pouvez modifier la balise option en quelque chose d'autre ce qui l'empêche d'apparaître, mais vous perdez tous les attributs ou balises de données HTML5.

La solution que j'ai proposée consistait à intégrer toutes les options que vous souhaitez désactiver dans une balise différente (dans ce cas, une option composée qui effectue le travail et explique clairement ce qui se passe).

Commençons par un exemple d’options, ainsi que par des balises de données facultatives:

<select id="myselections">
  <option data-something="a" value="5797">34</option>
  <option data-something="f" value="5809">37</option>
  <option data-something="j" value="5653">71</option>
</select>

Pour masquer les options que vous ne voulez pas:

$("#myselections > option").each(function () {
    if(some check) {
        $(this).wrap("<optionhidden></optionhidden>");
    }
});

Pour annuler ce qui précède sur toute la liste avant de masquer différentes options:

$("#myselections > optionhidden").each(function () {
    $(this).replaceWith($(this).html());
});
0
SharpC

Même problème ici dans IE 10, 11, Edge .. Les options ne disparaîtront pas comme dans Firefox, Chrome, ..

(jQuery-Code)

Fonctionne pas: 

  • $ ('option'). hide ();
  • $ ('option'). attr ('style', 'display: none! important');
  • $ ('option'). attr ('disabled', 'disabled');

Mais ça marche!

$('option').unwrap('div').wrap('<div style="display: none;" />');
0
mobdd

Essayez ce code suivant

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
var detachedSecondElem,detachedFirstElem="";
var firstDetachedAt, secondDetachedAt;
function changedFirst(){
 var val1=$('#slct').val();
 if(detachedSecondElem!="")
  $( detachedSecondElem ).insertAfter( $("#slct1 option").eq((secondDetachedAt-1)) );

 if(val1!=""){
   secondDetachedAt = $('#slct1 option[value="'+val1+'"]').prevAll().length;
   detachedSecondElem = $('#slct1 option[value="'+val1+'"]').detach();
 }
}
function changedSecond(){
 var val2=$('#slct1').val();
 if(detachedFirstElem!="")
  $( detachedFirstElem).insertAfter( $("#slct option").eq((firstDetachedAt-1)) );

 if(val2!=""){
   firstDetachedAt= $('#slct option[value="'+val2+'"]').prevAll().length;
   detachedFirstElem= $('#slct option[value="'+val2+'"]').detach();
 }
}
</script>
</head>
<body>
<select id="slct" onchange="changedFirst();"> 
 <option value="">Select</option>
 <option value="0">0</option>
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
</select>
<select id="slct1" onchange="changedSecond();"> 
 <option value="">Select</option>
 <option value="0">0</option>
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
</select>
<input type="button" value="click me" onclick="disableOption();"/>
<input type="button" value="click me" onclick="attachElem();"/>
</body>
</html>
0
user85230