ドロップダウンの選択に基づいて表示と非表示を切り替えます

Question

ドロップダウンフィールドには、ドロップダウン選択に基づいてファイルをダウンロードできるボタンが表示されます。問題はそれがボタンを追加し続けているので、1が選択されている場合は、1つのボタンが表示され、別のオプションを選択すると、別のボタンが追加されます。したがって、すべての選択で、ボタンはただ1つのボタンを表示するのではなく、追加を続けます。私は$（ '＃buttondownload'）を追加しようとしましたが、remove（）は正しく動作しません。ここでは、コードは次のとおりです。

 function showFields(this) { 
 
    if (this.value == "1" || this.value == "2") 
 
\t { 
 
\t \t download.style.display = "block"; 
 
\t } 
 
\t if (this.value == "") 
 
\t { 
 
\t \t download.style.display = "none"; 
 
\t } 
 
\t if (this.value == "1") 
 
\t { 
 
\t \t var file = "'test.pdf"; 
 
\t } 
 
\t if (this.value == "2") 
 
\t { 
 
\t \t var file = "test2.pdf"; 
 
\t } 
 
    html = '<button type="button" onClick="location.href='+ file + '">Download File</button>' 
 
\t $('#buttonDownload').append(html); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="ID" name="ID" onChange="showFields(this);"> 
 
\t \t <option value="">Select</option> 
 
\t \t <option value="1">1</option> 
 
     <option value="2">2</option> 
 
\t </select> 
 
    <div id="download"><div id="buttonDownload"></div></div>

Answer 1

新しいボタンを追加する前に、コンテナをクリアする必要があります。

$('#buttonDownload').empty().append(html); 

Answer 2

あなたがボタンをINGのappendあります。代わりに、古いボタンを置き換えます

function showFields() { 
 
    // ... 
 

 
    html = '<button type="button" onClick="location.href=XXX">Download File</button>' 
 
    $('#buttonDownload').html(html); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="ID" name="ID" onChange="showFields(this);"> 
 
    <option value="">Select</option> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
</select> 
 
<div id="download"> 
 
    <div id="buttonDownload"></div> 
 
</div>