Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>To accomplish what you want, you have to first create a 'dummy' option element nested in the select element and hide it with CSS. When the user changes the value, you will overwrite the dummy display value with the value of the option selected by the user.</p> <p>Afterwards, when the user goes to select a new option, the 'dummy' value will be hidden, but it will still be populated in the main select box. Here is some rough code based on your previous jsfiddle.</p> <p>Caveat: I am not sure of the compatibility of this solution.</p> <p><strong>HTML:</strong> </p> <pre><code>&lt;select id="select-el"&gt; &lt;option id="display-el" value="-1"&gt;Can't see me&lt;/option&gt; &lt;option id="id1" value="1"&gt;Option 1&lt;/option&gt; &lt;option id="id2" value="2"&gt;Option 2&lt;/option&gt; &lt;option id="id3" value="3"&gt;Option 3&lt;/option&gt; &lt;option id="id4" value="4"&gt;Option 4&lt;/option&gt; &lt;option id="id5" value="5"&gt;Option Longer&lt;/option&gt; &lt;/select&gt; </code></pre> <p><strong>CSS:</strong></p> <pre><code>#display-el { display:none; visibility: hidden; } </code></pre> <p><strong>JavaScript:</strong> </p> <pre><code>var N = 8; var selectEl = document.getElementById('select-el'); var displayEl = document.getElementById('display-el'); selectEl.onchange= function(e) { var index = selectEl.selectedIndex; var option = selectEl[index]; selectEl.selectedIndex = 0; if(option.text.length &gt; N){ displayEl.text = option.text.substr(0, N) + "..."; } else { displayEl.text = option.text } displayEl.value = option.value; console.log(displayEl.value); } </code></pre> <p>I've forked your jsFiddle here: <a href="http://jsfiddle.net/3v8yt/" rel="nofollow">http://jsfiddle.net/3v8yt/</a> so you can check it out.</p>
    singulars
    1. This table or related slice is empty.
    1. POonClick event for HTML Select
      singulars
      1. PTQuestion
    1. PTAnswer
    1. This table or related slice is empty.
    1. USbfuoco
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POonClick event for HTML Select
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COAlthough that is one way of 'doing it'... If it is a form, and you submit the form, your select element would go with the value '-1', right? And not the real value if I choosed 'Option Longer' with value='5'. You could either copy the value to your dummy element, although I don't think that is the best solution to use.
      singulars
      1. PO
      1. USrjml
    2. COThe value is copied with `displayEl.value = option.value;` in the code above, so it will submit with the appropriate value. The reason why I did it this way is because you can't simply set the display text of the select element; you have to assign it an option element, which will cause that option element to display with the ellipsis when you go to select a new value. Because the onchange event only fires after actually selecting a new value there is no event we can use to repopulate the options _before_ the select box pops up.
      singulars
      1. PO
      1. USbfuoco
    3. COSorry. If your line of the value was there before I didn't see it :S. Anyway, I don't think (my opinion) that working with "dummy" elements that way would be the best way, HTML is used for markup, or should be. That is why we have Javascript. The element select should have the options, and no dummy elements (my opinion). I wouldn't consider a good philosophy, although sometimes we have to it that way. Didn't understand what you said of: "can't simply set the display text of the...". But ok :).
      singulars
      1. PO
      1. USrjml
 

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