Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>To offer an alternative to using <em>only</em> a <code>select</code> element, that <em>will</em> allow for styling the font, and applying other css, while updating a traditional <code>select</code> element for submission to the server/script:</p> <h3>html:</h3> <pre><code>&lt;form action="#" method="post"&gt; &lt;select id="fontSelector" name="fontSelector"&gt; &lt;option value="calibri"&gt;Calibri&lt;/option&gt; &lt;option value="Times New Roman"&gt;Times New Roman&lt;/option&gt; &lt;option value="Comic Sans MS"&gt;Comic Sans MS&lt;/option&gt; &lt;/select&gt; &lt;/form&gt; &lt;ul id="fontList"&gt; &lt;li id="calibri" class="selected"&gt;Calibri&lt;/li&gt; &lt;li id="timesNewRoman"&gt;Times New Roman&lt;/li&gt; &lt;li id="comicSansMS"&gt;Comic Sans MS&lt;/li&gt; &lt;/ul&gt; </code></pre> <h3>jQuery:</h3> <pre><code>$('#fontList li').click( function(){ var chosen = $(this).index(); $('#fontSelector option:selected') .removeAttr('selected'); $('#fontSelector option') .eq(chosen) .attr('selected',true); $('.selected').removeClass('selected'); $(this).addClass('selected'); }); </code></pre> <p><a href="http://jsfiddle.net/davidThomas/A5bJg/">JS Fiddle demo</a>.</p> <p>Notes:</p> <ol> <li>This assumes that that the order of the <code>li</code> elements will be the same as the order of the <code>option</code> elements, since the <code>option</code> that becomes <code>selected</code> is chosen by index (of the <code>li</code>).</li> </ol> <p>References:</p> <ol> <li><a href="http://api.jquery.com/click/"><code>click()</code></a>.</li> <li><a href="http://api.jquery.com/index/"><code>index()</code></a>.</li> <li><a href="http://api.jquery.com/removeAttr/"><code>removeAttr()</code></a>.</li> <li><a href="http://api.jquery.com/eq/"><code>eq()</code></a>.</li> <li><a href="http://api.jquery.com/attr/"><code>attr()</code></a>.</li> <li><a href="http://api.jquery.com/removeClass/"><code>removeClass()</code></a>.</li> <li><a href="http://api.jquery.com/addClass/"><code>addClass()</code></a>.</li> </ol>
    singulars
    1. This table or related slice is empty.
    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. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. 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