Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>(Note: Please ignore this answer as your edit suggest not to use clone. If anybody face this problem and want to go for cloning use this, which is the reason I am not removing my answer).</p> <p>If you can manage to put a clone to select tag even though events are attached as desired result is almost not possible with current implementation. Here is the approach with code.</p> <p><strong>Browser's checked:</strong> <code>Chrome 28.0.0</code> <code>Firefox 22.0</code> <code>IE 7.0/8.0</code></p> <ol> <li>Used a clone select for managing the desired result.</li> </ol> <p><strong><em>CODE:</em></strong></p> <pre><code>!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt; &lt;title&gt; - jsFiddle demo&lt;/title&gt; &lt;script type='text/javascript' src='/js/lib/dummy.js'&gt;&lt;/script&gt; &lt;link rel="stylesheet" type="text/css" href="/css/result-light.css"&gt; &lt;style type='text/css'&gt; &lt;/style&gt; &lt;script type='text/javascript'&gt; window.onload=function(){ var select; function webkitFix(){ document.body.removeChild(select); setTimeout(function(){ document.body.appendChild(select); }, 1); } setTimeout(function(){ select = document.getElementsByTagName("select")[0]; select.style.fontSize='40px'; webkitFix(); setTimeout(function(){ select.style.visibility = 'hidden'; select1 = document.getElementsByTagName("select")[0]; select1.style.visibility = 'visible'; select1.style.fontSize='10px'; webkitFix(); },5000); },5000); } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;select id="one" multiple size="6" style="font-size:10px;"&gt; &lt;option value="AAAAAA1"&gt;AAAAAA1&lt;/option&gt; &lt;option value="BBBBBB2"&gt;BBBBBB2&lt;/option&gt; &lt;option&gt;AAAAAA3&lt;/option&gt; &lt;option&gt;BBBBBB4&lt;/option&gt; &lt;option&gt;AAAAAA5&lt;/option&gt; &lt;option&gt;BBBBBB6&lt;/option&gt; &lt;option&gt;AAAAAA7&lt;/option&gt; &lt;option&gt;BBBBBB8&lt;/option&gt; &lt;option&gt;AAAAAA9&lt;/option&gt; &lt;/select&gt; &lt;select id="two" multiple size="6" style="font-size:10px; position:absolute; visibility:hidden;"&gt; &lt;option value="AAAAAA1"&gt;AAAAAA1&lt;/option&gt; &lt;option value="BBBBBB2"&gt;BBBBBB2&lt;/option&gt; &lt;option&gt;AAAAAA3&lt;/option&gt; &lt;option&gt;BBBBBB4&lt;/option&gt; &lt;option&gt;AAAAAA5&lt;/option&gt; &lt;option&gt;BBBBBB6&lt;/option&gt; &lt;option&gt;AAAAAA7&lt;/option&gt; &lt;option&gt;BBBBBB8&lt;/option&gt; &lt;option&gt;AAAAAA9&lt;/option&gt; &lt;/select&gt; &lt;/body&gt; </code></pre> <p></p> <p><strong>Screenshot 1:</strong></p> <p><img src="https://i.stack.imgur.com/4fFKq.png" alt="enter image description here"></p> <p><strong>Screenshot 2:</strong></p> <p><img src="https://i.stack.imgur.com/JeAWs.png" alt="enter image description here"></p> <p><strong>Screenshot 3:</strong></p> <p><img src="https://i.stack.imgur.com/DiDun.png" alt="enter image description here"></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload