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設置選擇選項框的選定顯示值

回答

相關問題