手付かずHTML-を選択：削除するオプションが選択

Question

が表示されます私は、よく基本的にはこの苦労この質問のためのタイトルを見つけることですしていた：

私はプログラムで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>

：オプションは、私はそれ

をクリックしませんでしたが、ここでは完全なソース・コードは、選択ボックスに表示されます

状況を明確にする：

ユーザーがフォームの他の要素に入力した情報に基づいて選択ドロップダウンを変更したい。具体的には、ユーザーに適用されない場合に備えて、特定のオプションを選択から削除したいと考えています。

しかし、そこでは、ユーザーがまだ触れていないドロップダウンからオプションを削除すると、その選択ドロップダウンの最初のオプションが表示されます。

私は選択ドロップダウンの値を空の文字列にリセットしなければならないことを防ぐために、私は苛立ちを感じます。私はオプションの1つを削除しただけで、それが空の状態を変更しないselect-dropdownを期待します。

スニペットでは、3つのタイムアウトによってシミュレーションされた動作を確認できます。

質問：私はブラウザの動作を考えます（ユーザーが何もクリックしていないにもかかわらず最初のオプションを示しています）。最も確かにこれは、以前に手を加えられていなかった（元々の）選択ドロップダウンのオプションのうちの1つを取り除いていただけなので、開発者が見ることができる動作ではありませんか？これはバグですか？または私はただ頑固なのですか？

Answer 1

私が提供できる唯一の説明は、いくつかのjqueryのか、JSコード

を経由して、あなたが動的にデフォルト値を設定した場合にのみ、この動作が起こるということである（同じことが$('#mySelect').prop("selectedIndex", -1);で発生）

回避策は、提供することですあなたのselectタグでハードコードされたデフォルトのオプションは、これは前に空白のインデックスを設定することが回避され、変更後：

<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>