根據選擇在下拉列表中設置顯示值

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

聲明包含<select> DOM的mySelect變量。 然后，通過使用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>