根據下拉選擇顯示和隱藏

Question

我有一個下拉字段，當更改時應顯示一個按鈕，可以根據下拉選擇下載文件。 問題是它保持附加按鈕，所以如果選擇1，它會顯示1個按鈕，在選擇另一個選項時，它會附加另一個按鈕，依此類推。 因此，對於每個選擇，按鈕不斷加起來而不是只顯示一個按鈕。 我嘗試添加$（'＃buttondownload'）。remove（），但它無法正常工作。 這是代碼：

  function showFields(this) { if (this.value == "1" || this.value == "2") { download.style.display = "block"; } if (this.value == "") { download.style.display = "none"; } if (this.value == "1") { var file = "'test.pdf"; } if (this.value == "2") { var file = "test2.pdf"; } html = '<button type="button" onClick="location.href='+ file + '">Download File</button>' $('#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);"> <option value="">Select</option> <option value="1">1</option> <option value="2">2</option> </select> <div id="download"><div id="buttonDownload"></div></div> 

Answer 1

您需要在添加新按鈕之前清除容器：

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

Answer 2

你正在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>