it-swarm.com.de

Es ist schlecht, <span /> -Tags innerhalb von <option /> -Tags zu platzieren, nur für die Bearbeitung von Strings und nicht für das Styling.

Ich möchte Gruppen von Textinhalten eines <option />-Tags erstellen. Angenommen, ich habe folgendes: <option>8:00 (1 hour)</option>, das Zeitmuster 8:00 kann geändert werden, dann kann auch der Text in Klammern (1 hour) geändert werden.

Ich dachte daran, so etwas zu machen

<option>
  <span>8:00</span>
  <span> (1 hour)</span>
</option>

Es ist schlecht, <span />-Tags in <option />-Tags einzufügen, nur für die Bearbeitung von Strings, nicht für das Styling.

50
Rubens Mariuzzo

Aus der HTML 4.01-Spezifikation:

<!ELEMENT OPTION - O (#PCDATA)         -- selectable choice -->

Aus der HTML 5-Entwurfsspezifikation:

Inhaltsmodell: Text.

(Sogar die Spezifikationen für HTML 3.2 und HTML 2 besagen: <!ELEMENT OPTION - O (#PCDATA)*>)

Ein Optionselement darf keine untergeordneten Elemente haben. Also ja, es ist schlecht.

79
Quentin

Sie können ein Javascript-Plugin verwenden, um diese Einschränkung zu überwinden. Zum Beispiel jQuery Plugin "Select2" Select2 Plugin Homepage . Ich verwende es in einigen meiner Projekte und denke, dass es ziemlich flexibel und praktisch ist.

Es gibt eine Reihe von ihnen, aber sie machen dasselbe: Konvertieren Sie traditionelle <select> in <div>-Blöcke mit einer zusätzlichen Funktionalität.

4
Ivan Yaremchuk

Das option Element

Inhaltsmodell: Text

Nein, es ist nicht in Ordnung. Sie sollten die Werte in Ihrem Skript beibehalten, damit Sie sie bei Bedarf neu zusammenstellen können.

2
Josh Lee

Sie sollten einen HTML-Ersatz für Ihren <select> verwenden, wenn Sie dies tun möchten.

Wie von anderen Leuten festgestellt, und ich habe es mit <b> und anderen Tags versucht, <option> nimmt keine Tags in sich.

Was Sie tun können, da Sie <span> nicht in einem <option>-Tag verwenden können,
Sie können die Indexnummer verwenden, um den Text über zu extrahieren
document.getElementById (selectid) .options [x] .text wobei x der relevante Index ist, als Variable.

Dann verwenden Sie das "("), um die Variable in die Zeit aufzuteilen und auch das letzte Zeichen zu entfernen, wodurch das ")" entfernt wird.

Probe:

    <script type="text/javascript">
    function extractSelectText()
    {
    var text = document.getElementById("main").options[1].text
    /* 
    var tlength = text.length
    var splitno = tlength - 1
    var text2 = text.slice(0, splitno)
    var textArray = text2.split(" )")
    var time = textArray[0]
    var hours = textArray[1]
    }
    </script>

Das Ändern ist viel einfacher:

    <script type="text/javascript">
    function changeSelectText()
    {
    /* add your code here to determine the value for the time (use variable time) */

    /* add your code here to determine the value for the hour (use variable hours) */
   var textvalue = time + " (" + hours + ")"
   document.getElementById("main").options[1].text
   }
   </script>

Wenn Sie eine for-Funktion verwenden, können Sie jeden Wert der select-Funktion ändern, indem Sie 1 durch 2, 3 usw. ersetzen. Setzen Sie eine festgelegte Intervall-Funktion, um sie ständig zu aktualisieren.

1
dp4

Eine Möglichkeit zur Bearbeitung wäre die Verwendung einiger ausgefallener Musteranpassungen, um den Inhalt zu aktualisieren. Es ist langsamer und ressourcenintensiver und hängt davon ab, wie normal das Format ist. HTML-Änderungen sind jedoch nicht erforderlich. Mein Anliegen wäre jedoch die Zugänglichkeit und die Benutzererfahrung. Das Ändern der Werte ist für Bildschirmleser-Software schwer zu finden und kann andere Benutzer verwirren.

0
cdeszaq