javascript HTML 选择的 onClick 事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15123584/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
onClick event for HTML Select
提问by curioussam
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.
我有一个 HTML 选择问题，我想将更长的选项显示为省略号。我可以通过 javascript onChange 实现这一点，在那里我检查所选选项文本的长度，如果它大于 N，则将其更改为省略号文本。这里的问题是，一旦选择了选项并省略了，我再次单击选择框，原始文本现在显示为省略号。我需要始终显示原始选项列表并仅在选择选项时执行省略号。
My onChange code looks like
我的 onChange 代码看起来像
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
我认为实现此目的的方法之一是在单击选择时刷新原始列表。不幸的是，我的浏览器不支持 HTML 选择上的“点击”事件。即使我使用
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
DOM 识别点击事件，但只有在显示列表后才会触发，从而违背了目的。就像我在这里做的一样 jsFiddle
Also a big limitation that I CANNOT use jQuery in this case!
在这种情况下我不能使用jQuery也是一个很大的限制！
Please advise!
请指教！
采纳答案by bfuoco
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.
要完成您想要的操作，您必须首先创建一个嵌套在 select 元素中的“虚拟”选项元素，并使用 CSS 将其隐藏。当用户更改该值时，您将使用用户选择的选项的值覆盖虚拟显示值。
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.
之后，当用户选择一个新选项时，“虚拟”值将被隐藏，但它仍将填充在主选择框中。这是基于您之前的 jsfiddle 的一些粗略代码。
Caveat: I am not sure of the compatibility of this solution.
警告：我不确定此解决方案的兼容性。
HTML:
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:
CSS：
#display-el {
display:none;
visibility: hidden;
}
JavaScript:
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.
我在这里分叉了您的 jsFiddle：http: //jsfiddle.net/3v8yt/，因此您可以查看它。
回答by Elgar Storm
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 即可实现您想要的效果，根本无需使用 Javascript 替换选项文本。您甚至可以对选择和选项使用相同的 css。
CSS:
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 exampleto see how easily this can be implemented.
查看这个 jsfiddle 示例，看看这可以多么容易地实现。
回答by rjml
I can think of two options.
我能想到两种选择。
Option 1: have hidden elements with the "real text", let's say:
选项 1：具有带有“真实文本”的隐藏元素，让我们说：
<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 '...').
然后，当检测到 onchange 时，重新填充选择列表（与您所拥有的类似，但对于一个元素，对所有元素应用真实文本），然后为所选（'...'）应用您的代码。
Option 2: before change the text to '...', save the state, I guess you only would need two javascript variables, let's say:
选项 2：在将文本更改为 '...' 之前，保存状态，我猜您只需要两个 javascript 变量，让我们说：
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 '...'
在应用 '...' 之前，在检测到 onchange 时将实际状态设置为这些变量，例如： 1 - 在更改之前，在实际选项上设置 realText（实际上与 '...' 一起使用的选项） 2 - 保存 realText plus使用新选项（即将更改）的实际选项 3 - 应用“...”
When new onchange detected, it should restore the text of the option previously selected, and set the new one.
当检测到新的 onchange 时，它应该恢复以前选择的选项的文本，并设置新的。
Hope you understand...
希望你能理解...
EDIT: Long time that I don't work purely JS, but I'll try.
编辑：很长一段时间我不纯粹的 JS 工作，但我会尝试。
At some point on your code, declare 2 global vars:
在您的代码的某个时刻，声明 2 个全局变量：
var actualOption = 0;
var realText = '';
On your onchange function apply something like:
在你的 onchange 函数上应用类似的东西：
(...)
if (actualOption!=0) option[actualOption].text = realText;
(...)
On your if(option[selectedIndex....., apply something like:
在你的 if(option[selectedIndex ....., 应用类似：
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.
在简历中：在更改前保存所选选项的状态。当检测到新的 onchange 时，恢复先前选择的选项，并保存新选择的选项状态。
I think it should work.
我认为它应该工作。
