下面的代碼顯示了四個下拉菜單。當您在下拉菜單中選擇一個選項時,它會將該選項顯示爲底部。爲我的同事創建一個四字符代碼是非常簡單的工具。它的工作原理,但我知道我的JavaScript是非常低效的。我遇到的問題是角色之間有空隙。我之前使用過DIV,並轉而採用SPAN思維來解決這個問題。我們希望能夠將窗口中的四個字符快速複製並粘貼到應用程序,但空間被複制,因此我們最終需要手動刪除它們。如何消除四個生成角色的空間?謝謝。用JavaScript顯示多個選項
<html>
<body>
<script type="text/javascript">
function dropdownYear(value){
console.log(value);
document.getElementById("year").innerHTML = value;
}
function dropdownMarket(value){
console.log(value);
document.getElementById("market").innerHTML = value;
}
function dropdownMonth(value){
console.log(value);
document.getElementById("month").innerHTML = value;
} \t
function dropdownRandom(value){
console.log(value);
document.getElementById("random").innerHTML = value;
} \t
</script>
<select onChange="dropdownYear(this.value)" name="search_type">
<option value="Select Year">Select Year</option>
<option value="F">F</option>
<option value="G">G</option>
<option value="H">H</option>
\t <option value="J">J</option>
\t <option value="K">K</option>
\t <option value="L">L</option>
\t <option value="M">M</option>
\t <option value="N">N</option>
\t <option value="P">P</option>
\t <option value="Q">Q</option>
</select>
<br />
<select onChange="dropdownMarket(this.value)" name="search_type">
<option value="Select Market">Select Market Category</option>
<option value="A">Buyers Guide</option>
<option value="B">Miscellaneous - All Markets Catalogs</option>
<option value="C">Miscellaneous - All Markets Misc (Fax/e-mail/trade show/upsell)</option>
\t <option value="E">EMS - Catalogs</option>
<option value="F">EMS - Misc (Fax/e-mail/trade show/upsell)</option>
<option value="G">Occ Health - Catalogs</option>
<option value="H">Occ Health - Misc (Fax/e-mail/trade show/upsell)</option>
<option value="J">Moore Brand</option>
<option value="K">Primary Care - Catalogs</option>
<option value="L">Primary Care - Misc (Fax/e-mail/trade show/upsell)</option>
<option value="M">Resellers - Catalogs</option>
<option value="N">Resellers - Misc (Fax/e-mail/trade show/upsell)</option>
<option value="P">Podiary - Catalogs</option>
<option value="Q">Podiary - Misc (Fax/e-mail/trade show/upsell)</option>
<option value="S">School - Catalogs</option>
<option value="T">School - Misc (Fax/e-mail/trade show/upsell)</option>
<option value="W">Public Sector (Cor/FSL) - Catalogs</option>
<option value="X">Public Sector (Cor/FSL) - Misc (Fax/e-mail/trade show/upsell)</option>
<option value="Y">RX</option>
<option value="Z">Reactivation</option>
</select>
<br />
<select onChange="dropdownMonth(this.value)" name="search_type">
<option value="Select Month">Select Month</option>
<option value="A">January</option>
<option value="B">February</option>
<option value="C">March</option>
\t <option value="D">April</option>
\t <option value="E">May</option>
\t <option value="F">June</option>
\t <option value="G">July</option>
\t <option value="H">August</option>
\t <option value="I">do not use</option>
\t <option value="J">September</option>
\t <option value="K">October</option>
\t <option value="L">November</option>
\t <option value="M">December</option>
</select>
<br />
<select onChange="dropdownRandom(this.value)" name="search_type">
<option value="Select Random">Select Random</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
\t <option value="3">3</option>
\t <option value="4">4</option>
\t <option value="5">5</option>
\t <option value="6">6</option>
\t <option value="7">7</option>
\t <option value="8">8</option>
\t <option value="9">9</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<br /><br />
<span id="year"></span>
<span id="market"></span>
<span id="month"></span>
<span id="random"></span>
</body>
</html>