基於下拉選擇顯示和隱藏

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

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