Databases
StackOverflow2013
Postsdbo
PODropdowns with "other" option
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODropdowns with "other" option
    primarykey
    data
    text
    <p>Every time I get a spec that calls for a dropdown with an "Other (specify below)" option I groan because they're such a pain to implement.</p> <ol> <li>What's the best way to store this information in the database? Is it better to use two fields, one an integer foreign key to the value in a different table (including "Other"), and second string field to store the "Other" value if it's chosen? Or just store the chosen option as a string regardless (this also makes fetching the value back out of the database much easier).</li> <li>Interface-wise, do you use a regular old <code>&lt;select&gt;</code> and pop up a hidden <code>&lt;input type="text"/&gt;</code> if "Other" is chosen (maybe via some jQuery hackery), or use some kind of combox widget? The "filtering" version of <a href="http://dhtmlx.com/docs/products/dhtmlxCombo/" rel="nofollow">this widget</a> is the most user-friendly one I've found, but the implementation doesn't look very good (2000 lines, and it has bugs).</li> </ol> <hr> <p>As an example, let's say I have a table called <code>vehicles</code>. It lists all the vehicles that are registered on my site. It contains stuff like, year, make, model, mileage.</p> <p>Let's say I have another table that holds all the makes for users to pick from: Honda, Toyota, BMW, etc.</p> <p>But my "makes" table might not be up to date, so I want to allow users to enter their own if it isn't listed. In this scenario they would choose "Other Make" from the drop-down, and then type in the make manually.</p> <p>How would you represent this in the <code>vehicles</code> table?</p> <p>a. As one field, <code>make</code> which might be a <code>varchar(255)</code>. i.e., if they choose an existing make, it will simply be copied into this field<br> b. As two fields: <code>make_id</code> and <code>make_other</code>. The first holding a key to the <code>makes</code> table, and the 2nd is only filled in if they choose "other".</p> <hr> <p>A jQuery solution to showing/hiding the "Other" textbox:</p> <pre><code>$('select&gt;option').filter(function() { return !!$(this).data('other'); }).each(function() { $(this).closest('div.row').next().toggle($(this).is(':selected')); $(this).parent().on('change', function() { if($(':selected',this).data('other')) { $(this).closest('div.row').next().show().find('input').focus(); } else { $(this).closest('div.row').next().hide().find('input').val(''); } }); }); </code></pre> <p>Just add <code>data-other="1"</code> to the "Other (please specify)" <code>&lt;option&gt;</code>. Assumes your inputs are laid out in <code>&lt;div class="row"&gt;</code> -- modify for other layouts.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USmpen
    1. USmpen
    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. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. PODropdowns with "other" option
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PODropdowns with "other" option
      1. UStmh
      1. VTFavorite
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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