如何在 select 上的選擇器文本值中顯示一個值，以不同於下拉列表中可供選擇的選項文本？

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/

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 關聯的模糊事件，以將事件更改為處理程序仍然是模糊 function。 在 blur function 中，我在設置選項值后調用了 blur。 聚焦 function； 我專注於空選項並將其樣式設置為無，因此它不會顯示為空選項並在下拉列表正文中占據令人不安的空白空間。

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

也從您的評論鏈接到提琴手上的代碼

Answer 2

以下方法就像一個魅力（現在在我的桌面上，但移動設備需要一個解決方案，我會考慮使用工具提示或一些標簽）！

我使用了兩個 select 選項。 一個位於較高的 z 索引處，是底部 z 索引的偽元素。 單擊偽元素會觸發底部打開。 然后我使用飽和計數器（點擊計數器）在第一次初始點擊元素后檢測點擊，以防止第一個 select 如果未選擇更新值。 然后我根據 val 屬性和 data-descr attr 作為連接值更新了頂部 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 ie 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>

JSFiddle https://jsfiddle.net/dv1oLuhr/35/