Set selected display value of select option box

Question

I want to make a selection in my drop down where the display text is different than the actual value. Once I make my selection I want the actual HTML that is displayed in the SELECT box to show the actual value, not the selected text.

I have this so far. It almost works, but once I make the selection, it DOES set the viewable field to the value, but if I click the dropdown a second time the initial selectable choices are no longer there, just the values.

<select size="1" style="width: 28mm; border: 1px solid;"" name="Priority"
        id="Priority" onChange="setDevices(this);">
    <option selected><? print($row[Priority]); ?></option>
    <option value="Pri1">This is Priority 1</option>
    <option value="Pri2">This is Priority 2</option>
    <option value="Pri3">This is Priority 3</option>
    <option value="Pri4">This is Priority 4</option>
</select>

function setDevices(elem) {
    elem.options[elem.selectedIndex].innerHTML = elem.options[elem.selectedIndex].value
}

Answer 1

edited 02/02/14

So you want "This is Priority 1" to change to "Pri1" when selected, and change back when unselected?

You'll need to store the original value somewhere when changing it the first time, and add some code to restore that stored value when the selection changes.

You could use the "rel" attribute maybe:

<select size="1" style="width: 28mm; border: 1px solid;"" name="Priority" id="Priority" onchange="setDevices(this);">
  <option selected><? print($row[Priority]); ?></option>
  <option value="Pri1" rel="This is Priority 1">This is Priority 1</option>
  <option value="Pri2" rel="This is Priority 2">This is Priority 2</option>
  <option value="Pri3" rel="This is Priority 3">This is Priority 3</option>
  <option value="Pri4" rel="This is Priority 4">This is Priority 4</option>
</select>

<script>
  function setDevices(elem){
    for(i=0; i<elem.options.length; i++) {
      elem.options[i].innerHTML = (i == elem.selectedIndex) ? elem.options[i].value : elem.options[i].getAttribute("rel");
    }
  }
</script>

Answer 2

Bringing this forward to 2019, we can now use data attributes to store the previous info

 function setDevices(elem) { let arrMeta = elem.dataset.meta.split("|"); let index = parseInt(arrMeta[0], 10); let text = arrMeta[1]; //Reset the old text elem.options[index].innerHTML = text; //Set the meta from the new elem.dataset.meta = elem.selectedIndex + "|" + elem.options[elem.selectedIndex].innerHTML; //Update the new elem.options[elem.selectedIndex].innerHTML = elem.value; } 

 <select size="1" style="width: 28mm; border: 1px solid;" name="Priority" id="Priority" onchange="setDevices(this);" data-meta="0|"> <option selected> <? print($row[Priority]); ?> </option> <option value="Pri1">This is Priority 1</option> <option value="Pri2">This is Priority 2</option> <option value="Pri3">This is Priority 3</option> <option value="Pri4">This is Priority 4</option> </select> 

You could of course use 2 data attributes, one for the previous selected index and one for the previous text.