基於選擇在下拉列表中設置顯示值

Question

我有一個標準的下拉列表，我希望它在關閉時顯示VALUE，但是在展開以供選擇時顯示文本。例如，根據我的代碼，如果用戶從列表中選擇'Item 3'，則應在列表關閉時顯示3。我到了能夠獲取所選值的位置，但我不知道如何重寫下拉列表中顯示的內容。

感謝任何幫助！

<script type="text/javascript"> 
function setValue() 
{ 
    var value=document.getElementById("mySelect").value; 
    //Don't know what to put here 
} 
</script> 

<select name="mySelect" id="mySelect" onchange="setValue();"> 
    <option value="1" selected="">Item 1</option> 
    <option value="2">Item 2</option> 
    <option value="3">Item 3</option> 
    <option value="4">Item 4</option> 
</select> 

Answer 1

聲明mySelect變量含有<select> DOM。然後通過使用mySelect，您可以獲得<select>標記的屬性。

var mySelect = document.getElementById("mySelect"); 

然後，您可以訪問數組的mySelect選項。

mySelect.options[] 

mySelect.selectedIndex會給你當前選擇的標籤索引。

最後，通過附加.text屬性，您可以設置當前選擇的新值。

mySelect.options[mySelect.selectedIndex].text = mySelect.value; 

事情是這樣的：

function setValue() { 
 
    var mySelect = document.getElementById("mySelect"); 
 
    mySelect.options[mySelect.selectedIndex].text = mySelect.value; 
 
}

<select name="mySelect" id="mySelect" onchange="setValue();"> 
 
    <option value="1" selected="">Item 1</option> 
 
    <option value="2">Item 2</option> 
 
    <option value="3">Item 3</option> 
 
    <option value="4">Item 4</option> 
 
</select>