title: How to create 3 columns in the drop-down list using jQuery UI selectMenu widget?
body: <p>I was given a task for creating a drop-down list consisting of 3 columns (in each row) as shown in the below image.</p>
  <p><a href="https://i.stack.imgur.com/2fxMi.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2fxMi.jpg" alt="dropdown image" /></a></p>
  <p>Now, I realized that the Selectmenu widget of the jQuery UI will fulfill my requirement and therefore, I used the following code (as given on <a href="http://api.jqueryui.com/selectmenu/" rel="nofollow noreferrer" title="official documentation page of selectMenu widget">their official documentation page</a>).</p>
  <pre><code>&lt;!doctype html&gt;
  
  &lt;html lang=&quot;en&quot;&gt;
  
  &lt;head&gt;
  
  &lt;meta charset=&quot;utf-8&quot;&gt;
  
  &lt;title&gt;selectmenu demo&lt;/title&gt;
  
  &lt;link rel=&quot;stylesheet&quot; href=&quot;//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css&quot;&gt;
  
  &lt;style&gt;
  
  label { display: block; }
  
  select { width: 200px; }
  
  .overflow { height: 200px; }
  
  &lt;/style&gt;
  
  &lt;script src=&quot;//code.jquery.com/jquery-1.12.4.js&quot;&gt;&lt;/script&gt;
  
  &lt;script src=&quot;//code.jquery.com/ui/1.12.1/jquery-ui.js&quot;&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;label for=&quot;number&quot;&gt;Select a number:&lt;/label&gt;
  
  &lt;select name=&quot;number&quot; id=&quot;number&quot;&gt;
  
  &lt;option value=&quot;1&quot;&gt;1&lt;/option&gt;
  
  &lt;option value=&quot;2&quot; selected&gt;2&lt;/option&gt;
  
  &lt;option value=&quot;3&quot;&gt;3&lt;/option&gt;
  
  &lt;option value=&quot;4&quot;&gt;4&lt;/option&gt;
  
  &lt;option value=&quot;5&quot;&gt;5&lt;/option&gt;
  
  &lt;option value=&quot;6&quot;&gt;6&lt;/option&gt;
  
  &lt;option value=&quot;7&quot;&gt;7&lt;/option&gt;
  
  &lt;option value=&quot;8&quot;&gt;8&lt;/option&gt;
  
  &lt;option value=&quot;9&quot;&gt;9&lt;/option&gt;
  
  &lt;option value=&quot;10&quot;&gt;10&lt;/option&gt;
  
  &lt;option value=&quot;11&quot;&gt;11&lt;/option&gt;
  
  &lt;option value=&quot;12&quot;&gt;12&lt;/option&gt;
  
  &lt;option value=&quot;13&quot;&gt;13&lt;/option&gt;
  
  &lt;option value=&quot;14&quot;&gt;14&lt;/option&gt;
  
  &lt;option value=&quot;15&quot;&gt;15&lt;/option&gt;
  
  &lt;option value=&quot;16&quot;&gt;16&lt;/option&gt;
  
  &lt;option value=&quot;17&quot;&gt;17&lt;/option&gt;
  
  &lt;option value=&quot;18&quot;&gt;18&lt;/option&gt;
  
  &lt;option value=&quot;19&quot;&gt;19&lt;/option&gt;
  
  &lt;/select&gt;
  
  &lt;script&gt;
  
  $( &quot;#number&quot; )
  
  .selectmenu()
  
  .selectmenu( &quot;menuWidget&quot; )
  
  .addClass( &quot;overflow&quot; );
  
  &lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  <p>The problem was that I was looking to create 3 columns instead of the 1 default column. So, I tried two options for aligning the text content inside the option tag.</p>
  <ol>
  <li>Putting the text inside the span tag.</li>
  <li>Putting the text inside a table made of one row and three columns (cells).</li>
  </ol>
  <p>Given below is the code which I tried.</p>
  <pre><code>&lt;option value=&quot;1&quot;&gt;
          &lt;span align=&quot;left&quot;&gt;Apple&lt;/span&gt;
          &lt;span align=&quot;center&quot;&gt;Mango&lt;/span&gt;
          &lt;span align=&quot;right&quot;&gt;Orange&lt;/span&gt;
          &lt;/option&gt;
        &lt;option value=&quot;2&quot; selected&gt;
        &lt;table&gt;
          &lt;tr&gt;
            &lt;td align=&quot;left&quot;&gt;1&lt;/td&gt;
            &lt;td align=&quot;center&quot;&gt;2&lt;/td&gt;
            &lt;td align=&quot;right&quot;&gt;3&lt;/td&gt;
          &lt;/tr&gt;
          &lt;/table&gt;
        &lt;/option&gt;
  </code></pre>
  <p>But this didn't fix my problem as I was getting the Output as shown in the below image.</p>
  <p><a href="https://i.stack.imgur.com/aFJMf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aFJMf.png" alt="wrong output" /></a></p>
  <p>Since I'm a beginner in HTML, CSS, and jQuery, therefore, I have no idea of what to do next for creating a drop-down list containing 3 columns in each row. Please note that I'll select the whole row consisting of all the 3 columns (as shown in the below image) and not any cell of any particular column.Can anyone kindly suggest what can be done to fix this problem and create the dropdown list as shown in the first image?</p>