javascript - onClick event for HTML Select - Stack Overflow

admin管理员组

文章数量:1405516

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 acplish 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!

---

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 acplish 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!

---

• javascript
• html
• html-select

Share Improve this question Follow asked Feb 27, 2013 at 22:19 curioussamcurioussam 44933 gold badges99 silver badges1919 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

To acplish 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 patibility 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/3v8yt/ so you can check it out.

I can think of two options.

Option 1: have hidden elements with the "real text", let's say:

<input type="option1" value="Real text1" />
<input type="option2" value="Real text2" />

Then, when onchange is detected, repopulate select list (similar as you have, but instead for one element, apply the real text for all), then apply your code for selected (the '...').

Option 2: before change the text to '...', save the state, I guess you only would need two javascript variables, let's say:

var actualOption = 0;
var realText = '';

Before apply the '...', set the actual state to those variables when onchange detected, something like: 1 - before change, set realText on actualOption (the option that is actually with '...') 2 - save realText plus actualOption with the new option (that is going to be changed) 3 - apply the '...'

When new onchange detected, it should restore the text of the option previously selected, and set the new one.

Hope you understand...

EDIT: Long time that I don't work purely JS, but I'll try.

At some point on your code, declare 2 global vars:

var actualOption = 0;
var realText = '';

On your onchange function apply something like:

(...)
if (actualOption!=0) option[actualOption].text = realText;
(...)

On your if(option[selectedIndex....., apply something like:

var val = option[selectedIndex].text;
realText = val;
actualOption = selectedIndex;
option[selectedIndex].text = option[selectedIndex].text.substr(0,N) + "...";

In Resume: Save the state of your selected option before change. When new onchange detected, restore previous selected option, and save the new selected option state.

I think it should work.

You can actually achieve what you are wanting with just css, no need to replace option text using Javascript at all. You can even use the same css for both the select and the option.

CSS:

select, select option {
  overflow: hidden;
  text-overflow: ellipsis;
}

If you then have a width (or max-width) value set for the select and/or the option you should see the text includes ellipsis at the end, just before it is cut off.

Check out this jsfiddle example to see how easily this can be implemented.

本文标签： javascriptonClick event for HTML SelectStack Overflow