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

我想在我的下拉菜单中选择显示文本与实际值不同的选项。一旦我做出选择，我希望显示在SELECT框中的实际HTML显示实际值，而不是选定的文本。HTML Javascript设置选择选项框的选定显示值

我有这个到目前为止。它几乎可以工作，但是一旦我做出选择，它就会将可视区域设置为该值，但如果再次单击下拉菜单，则最初的可选选项不再存在，只是值。

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

来源

2013-11-14 user2992173

编辑14年2月2日

所以，你想 “这是优先级1” 调整为选择时 “PRI1”，并改回未选择的时候？

首次更改时需要将原始值存储在某处，并在选择更改时添加一些代码以恢复该存储值。

您可以使用 “相对” 属性可能：

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

来源

2013-11-14 13:40:23

差不多;并谢谢你！我认为我们正走在正确的轨道上。它仍然会根据需要返回“Pri2”，但当我再次单击下拉菜单来更改我的选择时，所有其他选项现在显示“未定义”，而我选择的选项仍然会显示“Pri2”而不是原来的“这是优先级2”。也许我可以牺牲一个隐藏的文本字段为此并返回该值回... – user2992173

只是为我的请求添加一些澄清...我期待有一个HTML选择下拉，当箭头被点击下拉框中，我看到了包含上述全文的选项列表。然后，当我做出选择时，它不会返回“This is Priority 2”的完整选项文本，而是返回值。如果我决定再次点击下拉列表，我仍然可以看到我所做的所有文字选择，就像我在做出任何选择之前所做的一样。我必须补充说，我确实在上面的例子中错过了rel =“原始文本”。一旦我将其添加到我的代码。但是，与原始问题相同的结果 – user2992173

我更新了我的答案中的Javascript，因此它现在应该可以在所有浏览器中工作（以前在Chrome中工作，但看起来不是Firefox）。 –

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

回答

相关问题