Change listbox options dynamically, on click of some event
<pre><code>&lt;x:select id="FileType" width="210px"&gt;
        &lt;x:option value="JPG"&gt;JPG&lt;/x:option&gt;
        &lt;x:option value="PNG"&gt;PNG&lt;/x:option&gt;
        &lt;x:option value="PDF"&gt;PDF&lt;/x:option&gt;
        &lt;x:option value="TIF"&gt;TIF&lt;/x:option&gt;
        &lt;x:option value="BMP"&gt;BMP&lt;/x:option&gt;
&lt;/x:select&gt;
</code></pre>

<p>Now on click of some button I want to change its option for this am doing like it.</p>

<pre><code>function fun(){
    $("#FileType").outerHTML = '&lt;x:select  name="FileType" id="FileType"&gt;&lt;x:option selected="true" value="JPG"&gt;JPG&lt;/x:option&gt;&lt;x:option value="PNG"&gt;PNG&lt;/x:option&gt;&lt;x:option value="PDF"&gt;PDF&lt;/x:option&gt;&lt;x:option value="TIF"&gt;TIF&lt;/x:option&gt;&lt;x:option value="BMP"&gt;BMP&lt;/x:option&gt;&lt;/x:select&gt;';
}
</code></pre>

<p>But <code>$("#FileType").outerHTML</code> is not working , if I alert <code>($("#FileType").outerHTML)</code> it's giving me <code>undefined</code>.</p>
