How Do I Display A Value In A Selector Text Value On Select, To Be Different Than The Option Text From Drop Down Available For Selection?

I want to modify either the drop down value or the option value to be different than one another in JS and I don't know how to do this? How do I accomplish this in JS jQuery, and o

Solution 1:

Note the empty option, and the selected for the first option (after the empty one) on DOM load in HTML

HTML

 <selectclass="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>

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

Note that I changed the blur event associated with the eventListener to change event to the handler is still blur function. In blur function I called blur after setting the options' values. In focus function; I focus on the empty option and set its style to none so it will not show as an empty option and occupy disturbing empty space in the drop down list body.

JavaScript

functionfocus() {
  [].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') + ')';
    }
  });
}
functionblur(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

Edit: Updated Below:

HTML

<selectclass="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

functionfocus(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') + ')';
    }
  });

}

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

Check this out on Fiddler

EDIT 2

Also from your comment's link to code on fiddler

Solution 2:

The following method worked like a charm (in my desktop for now, but mobile needs a solution which I will consider using a tooltip or some label)!

I resorted to using two select options. One is at a higher z index and is the pseudo element of the bottom z-index. Clicking on the pseudo element triggers the bottom to open. Then I used a saturating counter (click counter) to detect a click after the first initial click on the element to prevent first select from updating value if not selected. Then I updated the value of the top select based on the val attribute and data-descr attr as a concatenated value.

So far, Chrome responds precisely and accurately.

HTML

<selectclass="shortened-select"style="position:absolute !important; width: 200px"><!--option val="" data-descr="" style="display: none"></option--><optionvalue="Open"val="Open"data-descr="some description"selected>Open</option><optionvalue="Closed"val="Closed"data-descr="a bunch of text" >Closed</option></select><selectclass="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()"><optionid="opt">Open</option></select>

JavaScript/jQuery

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


$(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}");
    */
  });
});

functionactivatePointerEvents() {
  $(".long-select").css("{background-color:white; position: absolute !important; width: 200px; z-index: 10; pointer-events: auto !imporant}");
}


functionprocessOpen(e) {
  e.preventDefault();
  $input = $("select.shortened-select");
  var $this = $(this);
  $('.shortened-select').trigger('click');

}

functionmouseup() {
  $(".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"));
  returntrue;
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><selectclass="shortened-select"style="position:absolute !important; width: 200px"><!--option val="" data-descr="" style="display: none"></option--><optionvalue="Open"val="Open"data-descr="some description"selected>Open</option><optionvalue="Closed"val="Closed"data-descr="a bunch of text">Closed</option></select><selectclass="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()"><optionid="opt">Open</option></select>

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