使用JavaScript显示多个选择

时间：2014-09-19 11:28:04

标签： javascript html

以下代码显示了四个下拉菜单。当您在下拉菜单中选择一个选项时，它会将该选项显示为底部。这是为我的同事创建四字符代码的非常简单的工具。它有效，但我知道我的JavaScript效率很低。我遇到的问题是角色之间有一个空格。我之前使用的是DIV，并转而使用SPAN思考来解决这个问题。我们希望能够快速将窗口中的四个字符复制并粘贴到应用程序中，但空间会被复制，因此我们最终需要手动删除它们。如何从四个生成的字符中消除空格？感谢。

＆＃13;
＆＃13; 
<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;
    }	
function dropdownRandom(value){
    console.log(value);
        document.getElementById("random").innerHTML = value;
    }	
</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>
	<option value="J">J</option>
	<option value="K">K</option>
	<option value="L">L</option>
	<option value="M">M</option>
	<option value="N">N</option>
	<option value="P">P</option>
	<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>
	<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>
	<option value="D">April</option>
	<option value="E">May</option>
	<option value="F">June</option>
	<option value="G">July</option>
	<option value="H">August</option>
	<option value="I">do not use</option>
	<option value="J">September</option>
	<option value="K">October</option>
	<option value="L">November</option>
	<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>
	<option value="3">3</option>
	<option value="4">4</option>
	<option value="5">5</option>
	<option value="6">6</option>
	<option value="7">7</option>
	<option value="8">8</option>
	<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>
＆＃13;
＆＃13;
＆＃13;

5 个答案:

答案 0 :(得分：1)

只需删除<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;
    }	
function dropdownRandom(value){
    console.log(value);
        document.getElementById("random").innerHTML = value;
    }	
</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>
	<option value="J">J</option>
	<option value="K">K</option>
	<option value="L">L</option>
	<option value="M">M</option>
	<option value="N">N</option>
	<option value="P">P</option>
	<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>
	<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>
	<option value="D">April</option>
	<option value="E">May</option>
	<option value="F">June</option>
	<option value="G">July</option>
	<option value="H">August</option>
	<option value="I">do not use</option>
	<option value="J">September</option>
	<option value="K">October</option>
	<option value="L">November</option>
	<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>
	<option value="3">3</option>
	<option value="4">4</option>
	<option value="5">5</option>
	<option value="6">6</option>
	<option value="7">7</option>
	<option value="8">8</option>
	<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这些子元素＆gt;：

#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;
    }	
function dropdownRandom(value){
    console.log(value);
        document.getElementById("random").innerHTML = value;
    }	
</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>
	<option value="J">J</option>
	<option value="K">K</option>
	<option value="L">L</option>
	<option value="M">M</option>
	<option value="N">N</option>
	<option value="P">P</option>
	<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>
	<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>
	<option value="D">April</option>
	<option value="E">May</option>
	<option value="F">June</option>
	<option value="G">July</option>
	<option value="H">August</option>
	<option value="I">do not use</option>
	<option value="J">September</option>
	<option value="K">October</option>
	<option value="L">November</option>
	<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>
	<option value="3">3</option>
	<option value="4">4</option>
	<option value="5">5</option>
	<option value="6">6</option>
	<option value="7">7</option>
	<option value="8">8</option>
	<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>

答案 1 :(得分：0)

在span标记

之间更新了代码删除线制动

＆＃13;
＆＃13; 
<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;
        }	
    function dropdownRandom(value){
        console.log(value);
            document.getElementById("random").innerHTML = value;
        }	
    </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>
    	<option value="J">J</option>
    	<option value="K">K</option>
    	<option value="L">L</option>
    	<option value="M">M</option>
    	<option value="N">N</option>
    	<option value="P">P</option>
    	<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>
    	<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>
    	<option value="D">April</option>
    	<option value="E">May</option>
    	<option value="F">June</option>
    	<option value="G">July</option>
    	<option value="H">August</option>
    	<option value="I">do not use</option>
    	<option value="J">September</option>
    	<option value="K">October</option>
    	<option value="L">November</option>
    	<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>
    	<option value="3">3</option>
    	<option value="4">4</option>
    	<option value="5">5</option>
    	<option value="6">6</option>
    	<option value="7">7</option>
    	<option value="8">8</option>
    	<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

如何跟踪每个变量seperatley然后将它们全部写入同一元素 

<html>
<body>
<script type="text/javascript">
var year = "",
    market = "",
    month = "",
    random = "";
function dropdownYear(value){
    console.log(value);
        year = value;
  		writeToDocument()
    }
function dropdownMarket(value){
    console.log(value);
        market = value;
  		writeToDocument()
    }
function dropdownMonth(value){
    console.log(value);
        month = value;
  		writeToDocument()
    }	
function dropdownRandom(value){
    console.log(value);
        random = value;
  		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>
	<option value="J">J</option>
	<option value="K">K</option>
	<option value="L">L</option>
	<option value="M">M</option>
	<option value="N">N</option>
	<option value="P">P</option>
	<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>
	<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>
	<option value="D">April</option>
	<option value="E">May</option>
	<option value="F">June</option>
	<option value="G">July</option>
	<option value="H">August</option>
	<option value="I">do not use</option>
	<option value="J">September</option>
	<option value="K">October</option>
	<option value="L">November</option>
	<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>
	<option value="3">3</option>
	<option value="4">4</option>
	<option value="5">5</option>
	<option value="6">6</option>
	<option value="7">7</option>
	<option value="8">8</option>
	<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>

答案 3 :(得分：0)

只需将所有内容输出到单个范围内。

我也在这里清理了你的代码：

＆＃13;
＆＃13; 
<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>
	<option value="J">J</option>
	<option value="K">K</option>
	<option value="L">L</option>
	<option value="M">M</option>
	<option value="N">N</option>
	<option value="P">P</option>
	<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>
	<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>
	<option value="D">April</option>
	<option value="E">May</option>
	<option value="F">June</option>
	<option value="G">July</option>
	<option value="H">August</option>
	<option value="I">do not use</option>
	<option value="J">September</option>
	<option value="K">October</option>
	<option value="L">November</option>
	<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>
	<option value="3">3</option>
	<option value="4">4</option>
	<option value="5">5</option>
	<option value="6">6</option>
	<option value="7">7</option>
	<option value="8">8</option>
	<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>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：0)

也许尝试改变这样的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>
相关问题
最新问题