用JavaScript显示多个选项
问题描述:
下面的代码显示了四个下拉菜单。当您在下拉菜单中选择一个选项时,它会将该选项显示为底部。为我的同事创建一个四字符代码是非常简单的工具。它的工作原理,但我知道我的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>
答
只需拆除线路断<span>
元件之间:
<span id="year"></span><span id="market"></span><span id="month"></span><span id="random"></span>
白空间,在HTML中,折叠到一个单一的空间(这包括行分解)。
<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>
你也可以换的<span>
元素父容器内,然后float
这些子元素>:
#spanWrapper span {
float: left;
}
<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 />
<div id="spanWrapper">
<span id="year"></span>
<span id="market"></span>
<span id="month"></span>
<span id="random"></span>
</div>
</body>
</html>
答
更新你的代码在跨度t之间移除行程制动AG
<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>
答
如何他们都
<html>
<body>
<script type="text/javascript">
var year = "",
market = "",
month = "",
random = "";
function dropdownYear(value){
console.log(value);
year = value;
\t \t writeToDocument()
}
function dropdownMarket(value){
console.log(value);
market = value;
\t \t writeToDocument()
}
function dropdownMonth(value){
console.log(value);
month = value;
\t \t writeToDocument()
} \t
function dropdownRandom(value){
console.log(value);
random = value;
\t \t writeToDocument()
}
function writeToDocument()
{
document.getElementById("output").innerHTML = year+market+month+random;
}
</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="output"></span>
</body>
</html>
答
只输出都保持跟踪每个变量seperatley的再写入同一元素的单跨。
我已经清理你的代码在这里有点太:
<html>
<body>
<script type="text/javascript">
var d = [] //this is an array where we will store data
function dropdownApply(type,value){
console.log(value);
d[type] = value; //save the value to a specific position in the array
document.getElementById("output").innerHTML = d.join('') //join all array data into a string and output it
}
</script>
<select onChange="dropdownApply(0,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="dropdownApply(1,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="dropdownApply(2,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="dropdownApply(3,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="output"></span>
</body>
</html>
答
也许尝试更改JavaScript这样的事情:
var finalCode;
function dropdownYear(value){
console.log(value);
document.getElementById("year").innerHTML = value;
var mkt = document.getElementById("market").innerHTML = value;
var mth = document.getElementById("month").innerHTML = value;
var rdm = document.getElementById("random").innerHTML = value;
document.getElementById("finalCode").innerHTML = value + mkt + mth + rdm;
}
... (other functions as the above)
,并加入到HTML:
<span id="random"></span>