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.
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.
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>
13647500cookie-checkBlenden Sie „deaktivierte“ Optionen im Dropdown-Menü ausyes
Könntest du uns deinen Code zeigen? Was hast du schon probiert?
– Zoë
20. Mai 2014 um 23:29 Uhr