原始的HTML的選擇：刪除選項將顯示選擇

我已經很難找到了這個問題的一個標題，那麼基本上是這樣的：原始的HTML的選擇：刪除選項將顯示選擇

編程方式修改HTML，選擇的選項，然後突然第一選項被顯示在選擇框，雖然我沒有點擊它，

下面是完整的源代碼：

$('#mySelect').val(''); 
 

 

 
setTimeout(function() { 
 
    $('#333').remove(); 
 
    setTimeout(function() { 
 
    $('#mySelect').val(''); 
 
    }, 2000); 
 
}, 2000);

<script src="//code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script> 
 
<form> 
 
    <select id="mySelect"> 
 
      <option id="111" value="111">first</option> 
 
      <option id="222" value="222">second</option> 
 
      <option id="333" value="333">third</option> 
 
     </select> 
 
</form>

現在來澄清一下情況：

我想根據用戶已經放入表單的其他元素的信息來修改選擇下拉菜單。更具體地說，我想從選擇中刪除某些選項，以防它們不適用於用戶。

但是，在那裏，當我從尚未被用戶觸摸的下拉列表中移除選項時，所述選擇下拉菜單的第一個選項將彈出到視圖中。

爲了防止我不得不將select-dropdown的值重置爲空字符串，我覺得這很刺激。我希望select-dropdown不會改變它的空狀態，只是因爲我刪除了其中一個選項。

在代碼片段中，您可以看到通過三次超時模擬的行爲。

現在的問題：我會考慮瀏覽器的行爲（顯示第一個選項，雖然用戶沒有點擊任何東西）的錯誤。當然，這不是開發人員可以預見的行爲，因爲他只是刪除了以前未觸及的（原始）選擇下拉列表中的一個選項？這是一個錯誤？還是我只是爲了固執？

來源

2017-07-29 Tobias Gassmann

我能提供的唯一解釋是，當你動態設置默認值此行爲只發生，通過一些jQuery的或JS代碼

（同樣的情況與$('#mySelect').prop("selectedIndex", -1);）

一種解決方法是提供在您選擇標籤的硬編碼的默認選項，這樣就避免了之前設置一個空白指數和任何變更後：

你有很空白類型：

<option label=" "></option> 
<option id="111" value="111">first</option> 
<option id="222" value="222">second</option>

還是比較愉快的：

<option disabled selected value> Pick One...</option> 
<option id="111" value="111">first</option> 
<option id="222" value="222">second</option>

來源

2017-07-29 14:07:01 PRMoureu

原始的HTML的選擇：刪除選項將顯示選擇

回答

相關問題