Blenden Sie „deaktivierte“ Optionen im Dropdown-Menü aus

Lesezeit: 3 Minuten

Ich verwende ein Plugin namens Composite Products, das von WooThemes / WooCommerce entwickelt wurde. Mit diesem Plugin können Sie komplexe Produkte erstellen, dh wenn Sie eine Zwillingsmatratze kaufen möchten, sollten Sie nur eine Zwillings-Boxspring und einen Zwillingsrahmen auswählen können. Das Problem mit diesem Plugin ist, dass es auch alle anderen verfügbaren Optionen anzeigt, aber sie sind deaktiviert (grau). Das Ziel ist, sie vollständig zu verstecken.

Danke für Ihre Hilfe.

Beispiel: http://cl.ly/image/1J2P2Y2s2g0V

Verknüpfung: http://bit.ly/1paEoMM

  • Könntest du uns deinen Code zeigen? Was hast du schon probiert?

    – Zoë

    20. Mai 2014 um 23:29 Uhr

Benutzer-Avatar
Fizzix

Dies funktioniert auf allen Browsern, funktioniert jedoch nur auf IE9 und höher:

select option:disabled {
    display:none;
}

Dies funktioniert auf allen gängigen Browsern bis zurück zu IE7:

select option[disabled="disabled"]
{ 
    display:none;
}

Alternativ können Sie jQuery verwenden, um fast alle gängigen Browser zusammen mit ihren früheren Versionen anzusprechen. Der folgende Code durchläuft alle Optionen und erkennt, ob ihre disabled Attribut ist tatsächlich ‘deaktiviert’. Wenn ja, wird es einfach nur ausgeblendet.

$('select option').each(function() {
   var thisAttr = $(this).attr('disabled');
   if(thisAttr = "disabled") {
      $(this).hide();
   }
});

  • Ist es möglich, die Antwort von @Mohammed unten zu überprüfen und seine Korrektur in Ihre Antwort zu integrieren, wenn sie richtig ist?

    – Athafoud

    8. Februar 2016 um 10:36 Uhr

Sie können es einfach mit CSS lösen

select option:disabled {
    display:none;
}

Ich habe gerade Ihre Website überprüft und ein bisschen HTML zum Testen kopiert

das funktioniert:

$(function() { 
      // check for options with disabled attribute 
      $('option[disabled="disabled"]').hide(); //then hide them                
});

mit jquery

  • Warum all die Mühe von jQuery auf sich nehmen, wenn Sie einfach CSS verwenden könnten, wenn das OP sich keine Sorgen darüber macht, auf alte Versionen von IE abzuzielen?

    – Fizzix

    20. Mai 2014 um 23:16 Uhr

  • Nun, seine Website verwendet bereits jquery, jquery löst dieses Problem in mehr Browsern als CSS, und er hat die Frage unter jquery gekennzeichnet.

    – nicht definiert

    20. Mai 2014 um 23:26 Uhr

  • Bei Stack Overflow geht es darum, anderen Benutzern zu helfen und eine globale Datenbank mit allen Fragen zu erhalten, die Benutzer möglicherweise zum Programmieren haben. Warum bieten Sie dem OP und anderen zukünftigen Benutzern, die auf diese Frage stoßen, nicht eine einfachere und elegantere Lösung, die schneller als jQuery ist? Oder noch besser, bieten Sie beides an.

    – Fizzix

    21. Mai 2014 um 0:30 Uhr

  • Du hast einen Punkt. Persönlich würde ich beide verwenden, ich habe nicht an den CSS-Fix gedacht, den Sie gepostet hatten, ich habe nur gesehen, dass die jquery, die Sie gepostet haben, eine unnötige Menge an Code war, Jquery gibt standardmäßig einen umschlossenen Satz von Elementen in einem ‘Array-Objekt’ zurück. Wenn Sie ihm einen Selektor geben, müssen Sie nicht mit .each iterieren, und mit der Verwendung von Psuedoselektoren können wir die Notwendigkeit beseitigen, unsere eigene bedingte Überprüfung des zurückgegebenen Werts der .attr-Methode hinzuzufügen. Mit unseren gemeinsamen Bemühungen sieht es so aus, als wäre das Problem gelöst!

    – nicht definiert

    21. Mai 2014 um 1:28 Uhr

  • Ja, hoffentlich haben wir sein Problem gelöst 🙂 Obwohl ich versucht habe, eine Cross-Browser-Lösung mit jQuery zu erstellen. Mit dem Selektor option[disabled="disabled"] ist nur für IE7 und höher verfügbar. Aber durch die Verwendung von .attr() Methode stattdessen kann es auf Browsern bis zurück zu IE6 (vielleicht sogar IE5) funktionieren. Deshalb musste ich eine Schleife verwenden, um die Werte zu vergleichen. Obwohl die Browserunterstützung nicht in der ursprünglichen Frage des OP enthalten war, sind unsere beiden Antworten gleichermaßen akzeptabel 🙂

    – Fizzix

    21. Mai 2014 um 2:05 Uhr


Eine neuere Lösung wäre, das versteckte Attribut zum Optionselement hinzuzufügen:

<option value="MyValue" hidden>MyText</option>

1364750cookie-checkBlenden Sie „deaktivierte“ Optionen im Dropdown-Menü aus

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy