Databases
StackOverflow2013
Postsdbo
POCreating a select drop-down list that expands when a user hover over an option
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCreating a select drop-down list that expands when a user hover over an option
    text
    copied!<p>I am trying to create a select element which has a basic list, then when the user hovers over an option it expands to shows a more complete list.</p> <p>I started by using css to hide all the values I wanted hidden, but this did not adjust the height of the select dropdown, so I was left with a lot of white space.</p> <p>I then tried to have two selects, one with the reduced list, the other with the complete list(which is hidden). I then used javascript to copy the options from the complete list to the reduced list, when a user hover on the 'Other' optgroup. The code for this is shown below.</p> <p>Html:</p> <pre><code>&lt;select id="Title"&gt; &lt;option value=""&gt;Select...&lt;/option&gt; &lt;option value="MR"&gt;Mr&lt;/option&gt; &lt;option value="MISS"&gt;Miss&lt;/option&gt; &lt;option value="MRS"&gt;Mrs&lt;/option&gt; &lt;optgroup label="Other"&gt;Other&lt;/optgroup&gt; &lt;/select&gt; &lt;select id="FullTitle" style="display:none"&gt; &lt;option value=""&gt;Select...&lt;/option&gt; &lt;option value="MR"&gt;Mr&lt;/option&gt; &lt;option value="MISS"&gt;Miss&lt;/option&gt; &lt;option value="MRS"&gt;Mrs&lt;/option&gt; &lt;option value="MS"&gt;Ms&lt;/option&gt; &lt;option value="DR"&gt;Doctor&lt;/option&gt; &lt;/select&gt; </code></pre> <p>Javascript:</p> <pre><code>&lt;script type="text/javascript"&gt; $('select').find('optgroup').hover( function () { var parent = $(this).parent() var selected = parent.find('option:selected').val() var id = "#Full" + parent.attr('id') parent.html($(id).html()) parent.find('option[value="'+ selected +'"]').attr('selected', 'selected') }) &lt;/script&gt; </code></pre> <p>This works fine in firefox but does not work in either IE or Chrome. I am not sure why.</p> <p>I was wondering if anyone knows why this is not working or a better approach to my problem?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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