Javascript 设置选择选项框的选定显示值

我想在下拉列表中选择显示文本与实际值不同的位置。选择后，我希望选择框中显示的实际HTML显示实际值，而不是所选文本

到目前为止，我有这个。它几乎可以工作，但一旦我做出选择，它会将可视字段设置为值，但如果我再次单击下拉列表，初始的可选择选项就不再存在，只有值

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

2014年2月2日编辑

所以，您希望“这是优先级1”在选中时更改为“优先级1”，而在未选中时更改回“优先级1”

第一次更改原始值时，需要将其存储在某个位置，并添加一些代码，以便在选择更改时恢复存储的值

您可以使用“rel”属性，也许：

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

将此提前到2019年，我们现在可以使用存储以前的信息


功能设置设备（elem）{
让arrMeta=elem.dataset.meta.split（“|”）；
let index=parseInt（arrMeta[0]，10）；
设text=arrMeta[1]；
//重置旧文本
elem.options[index].innerHTML=text；
//从新属性设置元
elem.dataset.meta=elem.selectedIndex+“|”+elem.options[elem.selectedIndex].innerHTML；
//更新新的
elem.options[elem.selectedIndex].innerHTML=elem.value；
}

这是第一优先事项
这是优先事项2
这是优先事项3
这是优先事项4
差不多；谢谢你！！我认为我们在正确的轨道上。它仍然会根据需要返回“Pri2”，但当我再次单击下拉菜单以更改我的选择时，所有其他选择现在都显示为“未定义”，我选择的选择仍然显示为“Pri2”，而不是原来的“这是优先级2”。也许我可以为此牺牲一个隐藏的文本字段，并将该值返回…只是为了对我的请求进行澄清。。。我希望有一个HTML选择下拉列表，当点击箭头下拉框时，我会看到一个包含上述全文的选项列表。然后，当我做出选择时，它不会返回完整的选项文本“This is Priority 2”，而是只返回值。如果我决定再次单击下拉列表，我仍然会看到所有的文本选择，就像我在做任何选择之前一样。我必须补充一点，我确实错过了上面示例中的rel=“原始文本”。一旦我把它添加到我的代码中。但与我的回答中最初的quesI更新了Javascript的结果相同，所以它现在应该可以在所有浏览器中工作（以前在Chrome中工作过，但似乎不是在Firefox中）。但是-这仍然不能完全满足您的要求。在我看来，您似乎希望下拉列表包含全文选项，但框本身包含值。“我的答案”让您接近，但所选选项将仅在列表和框中显示为值。如果你想拥有这么多的控制权，也许你应该考虑使用一个假的下拉列表而不是一个真实的元素——我认为eBay在“我的购买”页面中有类似的东西。