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

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

小提琴

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

标签： javascripthtmlcss

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 函数。在模糊功能中，我在设置选项值后调用模糊。对焦功能；我专注于空选项并将其样式设置为无，因此它不会显示为空选项并在下拉列表正文中占据令人不安的空白空间。

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

提琴手

编辑：更新如下：

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

也从您的评论链接到提琴手上的代码