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

 <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>

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

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

    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

Edit: Updated Below:

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

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

<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>

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