CODEWITHSUNDEEP
javascripthtml
user2992173
user2992173

Reputation: 21

Set selected display value of select option box

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
}

Upvotes: 2

Views: 7266

Answers (2)

Jon P
Jon P

Reputation: 19772

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.

Upvotes: 1

Doug McLean
Doug McLean

Reputation: 1309

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>

Upvotes: 0

Related Questions