2

我的 HTML 选择有问题，我想在其中将较长的选项显示为省略号。我可以通过 javascript onChange 实现这一点，在其中我检查所选选项文本的长度，如果它大于 N，它将其更改为省略号文本。这里的问题是，一旦选择并省略了该选项，然后我再次单击选择框，原始文本现在显示为省略号。我需要始终显示原始选项列表并仅在选择选项时执行省略号。

我的 onChange 代码看起来像

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

我认为实现此目的的方法之一是在单击选择时刷新原始列表。不幸的是，我的浏览器不支持 HTML 选择上的“点击”事件。即使我使用

event.preventDefault();

DOM 识别 click 事件，但仅在列表显示后才被触发，从而违背了目的。就像我在这里做的事情 jsFiddle

在这种情况下我不能使用 jQuery 也是一个很大的限制！

请指教！

4

3 回答 3

2

要完成您想要的，您必须首先创建一个嵌套在 select 元素中的“虚拟”选项元素，并使用 CSS 将其隐藏。当用户更改该值时，您将用用户选择的选项的值覆盖虚拟显示值。

之后，当用户选择一个新选项时，'dummy' 值将被隐藏，但仍会填充在主选择框中。这是基于您以前的 jsfiddle 的一些粗略代码。

警告：我不确定此解决方案的兼容性。

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);
}

我在这里分叉了你的 jsFiddle：http: //jsfiddle.net/3v8yt/所以你可以检查一下。

于 2013-02-27T22:54:57.887 回答
0

我可以想到两个选择。

选项1：具有“真实文本”的隐藏元素，比方说：

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

然后，当检测到 onchange 时，重新填充选择列表（与您的类似，但对于一个元素，将真实文本应用于所有元素），然后将您的代码应用于选定的（'...'）。

选项 2：在将文本更改为“...”之前，保存状态，我猜你只需要两个 javascript 变量，比方说：

var actualOption = 0;
var realText = '';

在应用“...”之前，在检测到 onchange 时将实际状态设置为这些变量，例如： 1 - 在更改之前，在实际选项上设置 realText（实际上带有 '...' 的选项） 2 - 保存 realText 加上带有新选项的实际选项（将要更改） 3 - 应用“...”

当检测到新的 onchange 时，它​​应该恢复先前选择的选项的文本，并设置新的。

希望你能理解...

编辑：很长一段时间我不纯粹的 JS 工作，但我会尝试。

在您的代码的某个时刻，声明 2 个全局变量：

var actualOption = 0;
var realText = '';

在您的 onchange 函数上应用如下内容：

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

在你的 if(option[selectedIndex .....，应用类似的东西：

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

在简历中：在更改之前保存所选选项的状态。当检测到新的 onchange 时，恢复之前选择的选项，并保存新选择的选项状态。

我认为它应该工作。

于 2013-02-27T22:32:31.613 回答
0

实际上，您只需使用 css 就可以实现您想要的，根本不需要使用 Javascript 替换选项文本。您甚至可以对 select 和 option 使用相同的 css。

CSS：

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

如果您为选择和/或选项设置了宽度（或最大宽度）值，您应该看到文本在末尾包含省略号，就在它被切断之前。

查看这个 jsfiddle 示例，了解它的实现有多容易。

于 2013-09-17T04:40:51.683 回答