如何在选择时显示选择器文本值中的值，以不同于下拉列表中可供选择的选项文本

Question

我想在JS中修改下拉值或选项值，使其彼此不同，但我不知道如何做到这一点？

如何在JS jQuery和CSS中实现这一点？

HTML

<select class="shortened-select">
<option value="Open" data-descr="some description"></option>
<option value="Closed" data-descr="a bunch of text"></option>
</select>

JavaScript

function focus() {
[].forEach.call(this.options, function(o) {
o.textContent = o.getAttribute('value') + ' (' + o.getAttribute('data-descr') + ')';
});
}
function blur() {
[].forEach.call(this.options, function(o) {
o.textContent = o.getAttribute('value');
});
}

document.querySelector(".shortened-select").onchange = function(){
debugger;
console.log(document.querySelectorAll(".shortened-select option")[document.querySelector(".shortened-select").selectedIndex]);
};
[].forEach.call(document.querySelectorAll('.shortened-select'), function(s) {
s.addEventListener('focus', focus);
s.addEventListener('blur', blur);
blur.call(s);
});

Fiddle

https://jsfiddle.net/qm1nxfwj/7/

Answer 1

注意HTML 中DOM加载时的空选项和为第一个选项(在空选项之后(选择的

HTML

<select class="shortened-select">
<option value=""></option>
<option value="Open" data-descr="some description" selected></option>
<option value="Closed" data-descr="a bunch of text"></option>
</select>

=========================================

注意，我更改了与eventListener关联的blur事件，将事件更改为处理程序仍然是blur函数。在模糊函数中，我在设置选项值后调用了模糊。对焦功能；我把重点放在空选项上，并将其样式设置为none，这样它就不会显示为空选项，也不会在下拉列表中占据令人不安的空白。

JavaScript

function focus() {
[].forEach.call(this.options, function(o) {
if (o.value === ""){o.selected = 'selected';
o.style = 'display:none;'}
else
{
o.textContent = o.getAttribute('value') + ' (' + o.getAttribute('data-descr') + ')';
}
});
}
function blur(e) {
[].forEach.call(this.options, function(o) {
o.textContent = o.getAttribute('value');
});
this.blur();
}

[].forEach.call(document.querySelectorAll('.shortened-select'), function(s) {
s.addEventListener('focus', focus);
s.addEventListener('change', blur);
blur.call(s);
});

Fiddler

编辑：更新如下：

HTML

<select class="shortened-select" id="options">
<option value="" id="nonOption"></option>
<option value="Open" data-descr="some description" selected></option>
<option value="Closed" data-descr="a bunch of text"></option>
</select>

JavaScript

function focus(e) {
[].forEach.call(this.options, function(o) {
if (o.id === 'nonOption'){
o.textContent = document.getElementById('options').value;
o.selected = 'selected';
o.style = 'display:none;';
}
else
{
o.textContent = o.getAttribute('value') + ' (' + o.getAttribute('data-descr') + ')';
}
});
}
function blur(e) {
[].forEach.call(this.options, function(o) {
if (o.selected === true && o.id === 'nonOption'){
//selectedOption = o;
o.selected = 'selected';
}
else
o.textContent = o.getAttribute('value');
});
this.blur();
}
[].forEach.call(document.querySelectorAll('.shortened-select'), function(s) {
s.addEventListener('focus', focus);
s.addEventListener('change', blur);
blur.call(s);
});

查看Fiddler

编辑2

也可以从你的评论链接到fiddler 上的代码

Answer 2

以下方法非常有效(目前在我的桌面上，但移动设备需要一个解决方案，我会考虑使用工具提示或一些标签(

我选择了两个选项。一个是在较高的z索引处，并且是底部z索引的伪元素。单击伪元素会触发底部打开。然后，我使用饱和计数器(点击计数器(来检测第一次初始点击元素后的点击，以防止第一次选择在未选中时更新值。然后，我更新了基于val属性和数据descr属性的top select的值作为连接值。

到目前为止，Chrome的响应准确无误。

HTML

<select class="shortened-select" style="position:absolute !important; width: 200px">
<!--option val="" data-descr="" style="display: none"></option-->
<option value="Open" val="Open" data-descr="some description" selected>Open</option>
<option value="Closed" val="Closed" data-descr="a bunch of text" >Closed</option>
</select>
<select class="long-select" style="background-color:white; position: absolute !important; width: 200px; z-index: 10; pointer-events: none" onmousedown="(function(event){processOpen(event);})(event, this)" onfoucusout="$('.shortened-select').focus()">
<option id="opt">Open</option>
</select>

JavaScript/jQuery

mouseupcount = 0;
$('.shortened-select').on("mouseup", function(e) {
if (mouseupcount == 0)
mouseupcount++;
else
return mouseup();
});

$(document).ready(function() {
$('.long-select').click(function(e) {
var element = document.querySelector('.shortened-select');

var event;
event = document.createEvent('MouseEvents');
event.initMouseEvent('mouseup', true, true, window);
element.dispatchEvent(event);
/* can be added for i.e. compatiblity.
optionsSelect.focus();
var WshShell = new ActiveXObject("WScript.Shell");
WshShell.SendKeys("%{DOWN}");
*/
});
});
function activatePointerEvents() {
$(".long-select").css("{background-color:white; position: absolute !important; width: 200px; z-index: 10; pointer-events: auto !imporant}");
}

function processOpen(e) {
e.preventDefault();
$input = $("select.shortened-select");
var $this = $(this);
$('.shortened-select').trigger('click');
}
function mouseup() {
$(".short-select").css("{background-color:white; position: absolute !important; width: 200px; z-index: 10; pointer-events: initial}");
opt = document.querySelectorAll(".shortened-select option")[document.querySelector(".shortened-select").selectedIndex];
$("#opt").html(opt.getAttribute("val") + " - " + opt.getAttribute("data-descr"));
return true;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select class="shortened-select" style="position:absolute !important; width: 200px">
<!--option val="" data-descr="" style="display: none"></option-->
<option value="Open" val="Open" data-descr="some description" selected>Open</option>
<option value="Closed" val="Closed" data-descr="a bunch of text">Closed</option>
</select>
<select class="long-select" style="background-color:white; position: absolute !important; width: 200px; z-index: 10; pointer-events: none" onmousedown="(function(event){processOpen(event);})(event, this)" onfoucusout="$('.shortened-select').focus()">
<option id="opt">Open</option>
</select>

JSFiddlehttps://jsfiddle.net/dv1oLuhr/35/