onClick event for HTML Select

Question

I have an issue with the HTML select where I want to display longer options as ellipsis. I ma able to achieve this via javascript onChange where I check the length of the selected option text and if its greater than lets say N, it changes it to an ellipsis'd text. The problem here is that once the option is selected and ellipsis'd, and I click on the select box again , the original text now appears as ellipsis'd one. I need to always display the original list of options and perform the ellipsis only when an option is selected.

My onChange code looks like

if(option[selectedIndex].text.length > N){
    var val = option[selectedIndex].text;
    option[selectedIndex].text = option[selectedIndex].text.substr(0,N) + "...";
}

One of the way i thought to accomplish this was to refresh the original list whenever the select is clicked. Unfortunately my browser doesn't support 'click' event on HTML select. Evenif I use

event.preventDefault();

the DOM recognizes click event but is fired only after the list is displayed thereby defying the purpose. something like what i am doing here jsFiddle

Also a big limitation that I CANNOT use jQuery in this case!

Please advise!

---

Solution

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.

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.

Caveat: I am not sure of the compatibility of this solution.

HTML:

<select id="select-el">
    <option id="display-el" value="-1">Can't see me</option>
    <option id="id1" value="1">Option 1</option>
    <option id="id2" value="2">Option 2</option>
    <option id="id3" value="3">Option 3</option>
    <option id="id4" value="4">Option 4</option>
    <option id="id5" value="5">Option Longer</option>
</select>

CSS:

#display-el {
  display:none;
  visibility: hidden;
}

JavaScript:

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 > N){
        displayEl.text = option.text.substr(0, N) + "...";
    } else {
        displayEl.text = option.text
    }

    displayEl.value = option.value;
    console.log(displayEl.value);
}

I've forked your jsFiddle here: http://jsfiddle.net/3v8yt/ so you can check it out.

Comments

[curioussam]

I apologize, can you explain with some code or pseudo-code! I am not clear with the options you mentioned.

[rjml]

Although 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.

[bfuoco]

The 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.

[rjml]

Sorry. 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 :).

[rjml]

You could save the state in javascript (unless browser has no javascript, but if that happens nothing of the script would work). As I write on my answer (although I didn't test it).