javascript 更新時下拉（選擇）文本不刷新

Question

我有一個簡單的下拉菜單...

Select your favorite fruit:
<select name="fruit" id="fruit">
    <option value="">--</option>
    <option>Apple</option>
    <option SELECTED>Orange</option>
    <option>Pineapple</option>
    <option>Banana</option>
</select>

我試過這樣做......

document.getElementById("fruit").value = "";

...將選擇更改為第一個選項

我也試過這樣做......

document.getElementById("fruit").length=0;

...刪除所有選項。

我也試過這樣做......

document.getElementById("fruit").innerHTML="<option value=''>NEW</option>";

...用新的選項替換選項。

當不在我的實際代碼中時，所有這些都按預期工作。 問題是當我嘗試將它包含在我的 WordPress 插件內的頁面中時。

發生的事情是......如果我在之后點擊它，值會發生變化並且很明顯......但是......下拉列表中的顯示文本保持為原始文本“橙色”（即使該文本實際上並不不再存在於下拉菜單中），直到我實際更改為新選擇。

我已嘗試搜索任何可能影響它的相關內容，但我什么也看不到。 在 WordPress 本身、主題、插件等之間，這里的代碼太多了。 我只是希望有人以前見過這個問題，並能指出我正確的方向，讓我知道要尋找什么。

Answer 1

這是因為您的id='fruit_1'但您使用的是name ，而不是fruit元素的id 。

使用document.getElementById("fruit_1")代替document.getElementById("fruit") 。 那應該行得通。