HTML-Steuerelement mit HTML- und JavaScript-Tags als Text auswählen

Question

Ich habe ein Select-Steuerelement, das Werte dynamisch abruft. Im Skript muss ich den folgenden Text innerhalb der Auswahl-Tags als inneren HTML einfügen.

<option value=""></option> 
<option><h1>zoot</h1></option> 
<option><div>divTest</div></option> 
<option><span> style="color:red;font-weight:bold;">SpanTest</span></option> 
<option><option>option</optipon></option> 

Was ich versuche, ist im Bild unten

Ich habe versucht, Htmlencode verwenden und das war nicht zu arbeiten. Kann ich dies mit JavaScript oder jQuery oder mit anderen Mitteln in HTML-Select-Steuerelement tun?

Answer 1

Wenn Sie möchten, dass der HTML-Code für den Benutzer sichtbar ist, müssen Sie ihn kodieren. Arbeitsbeispiel unten.

<select name="example"> 
 
    <option value=""></option> 
 
    <option>&lt;h1&gt;zoot&lt;/h1&gt;</option> 
 
    <option>&lt;div&gt;divTest&lt;/div&gt;</option> 
 
    <option>&lt;span&gt; style="color:red;font-weight:bold;">SpanTest&lt;/span&gt;</option> 
 
    <option>&lt;option&gt;option&lt;/optipon&gt;</option> 
 
</select>

Wenn Sie versuchen, Vorschau zu zeigen, diese HTML-Blöcke verwenden, können Sie möchten aus select Listen fallen zu lassen und eine andere Benutzeroberfläche so zu tun, bieten - wie Vorschauen mit Radio kombiniert Eingaben.

Answer 2

Sie können die Elemente zur Auswahl mit jQuery und der text-Funktion hinzufügen.

z.B.

var vals = ["<h1>zoot</h1>", 
 
    "<div>divTest</div>", 
 
    "<span> style='color:red;font-weight:bold;'>SpanTest</span>", 
 
    "", 
 
    "option" 
 
]; 
 

 
var $stuff = $("#stuff"); 
 

 
vals.forEach(function(val) { 
 
    $("<option/>").text(val).appendTo($stuff); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<select id="stuff"> 
 
    <option value=""></option> 
 
</select>