HTMLおよびJavaScriptタグをテキストとして含むHTML選択コントロール

Question

動的に値を取得する選択コントロールがあります。 スクリプトでは、selectタグの内側のHTMLとして次のテキストを挿入する必要があります。私がやろうとしています何

<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> 

は、私はHTMLEncodeを使用してみました、それはあまりにも働いていなかった

下の画像です。 JavaScriptやjQueryを使って、あるいはhtml selectコントロールの他の手段でこれを行うことができますか？

Answer 1

HTMLをユーザーが表示できるようにするには、エンコードする必要があります。以下の作業例。

<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>

あなたがそれらのHTMLブロックを使用してプレビューを表示しようとしている場合、あなたはselectリストから脱落し、そうする別のユーザインタフェースを提供することを望むかもしれない - などのラジオと組み合わせプレビューとして入力。

Answer 2

jQueryおよびtext機能を使用して選択項目に項目を追加できます。

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>