下拉列表项目以标记

Question

I have code below for a contact form I have created. Is it possible to get the selected value from both drop down lists to the labels on the preview page beside both the "Location" and "Category" fields? Anything helps, thanks.

  function openNav() { document.getElementById("myNav").classList.remove("collapsed"); var input = document.getElementById("txtDetail"); var value = input.value; var label = document.getElementById("labelDetail"); label.innerHTML = value; var input = document.getElementById("txtName"); var value = input.value; var label = document.getElementById("labelName"); label.innerHTML = value; var input = document.getElementById("txtNumber"); var value = input.value; var label = document.getElementById("labelNumber"); label.innerHTML = value; var input = document.getElementById("txtEmail"); var value = input.value; var label = document.getElementById("labelEmail"); label.innerHTML = value; document.getElementById("myNav").style.width = "100%"; } function closeNav() { document.getElementById("myNav").style.width = "0%"; document.getElementById("myNav").classList.add("collapsed"); } document.getElementById('file-upload').onchange = uploadOnChange; function uploadOnChange() { var filename = this.value; var lastIndex = filename.lastIndexOf("\\\\"); if (lastIndex >= 0) { filename = filename.substring(lastIndex + 1); } document.getElementById('filename').innerText = filename; var labelFile = this.value; var lastIndex = labelFile.lastIndexOf("\\\\"); if (lastIndex >= 0) { labelFile = labelFile.substring(lastIndex + 1); } document.getElementById('labelFile').innerText = labelFile; } var div = document.getElementsByClassName('dropdown-content'); for(var i =0;i<div.length;i++){ for(var j =0;j<div[i].children.length;j++){ div[i].children[j].addEventListener('click',function(){ this.parentNode.previousElementSibling.innerHTML = this.innerHTML; }) } } 

  * { margin: 0; padding: 0; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -o-font-smoothing: antialiased; font-smoothing: antialiased; text-rendering: optimizeLegibility; } .container { width: 100%; margin: 0 auto; position: relative; } #contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact textarea, #contact button[type="submit"] { font: 400 12px/16px "Verdana", Verdana; } #contact { background: #F9F9F9; padding: 25px; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24); height:477px; } #contact h3 { display: block; font-family:Verdana; font-size: 24px; font-weight: 300; margin-bottom: 10px; } #contact h4 { margin: 5px 0 15px; display: block; font-family:Verdana; font-size: 13px; font-weight: 400; } #contact h5 { text-decoration:underline; display: block; color:#4CAF50; font-family:Verdana; font-size: 19px; font-weight: normal; margin-bottom: 10px; } #contact h6 { text-decoration:underline; display: block; text-align:left; color:#4CAF50; font-family:Verdana; font-size: 15px; font-weight: normal; margin-bottom: 10px; } .fieldset { border: medium none !important; margin: 0 0 10px; min-width: 100%; padding: 0; width: 100%; } #contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact textarea { width: 100%; border: 1px solid #ccc; background: #FFF; margin: 0 0 5px; padding: 10px; } #contact input[type="text"]:hover, #contact input[type="email"]:hover, #contact input[type="tel"]:hover, #contact textarea:hover { -webkit-transition: border-color 0.3s ease-in-out; -moz-transition: border-color 0.3s ease-in-out; transition: border-color 0.3s ease-in-out; border: 1px solid #aaa; } #contact textarea { height: 100px; max-width: 100%; resize: none; } #button{ float:right; cursor: pointer; padding: 13px 32px; width:125px; height:45px; border: none; font-family:Verdana; background: #4CAF50; color: #FFF; margin: 0 0 5px; font-size: 15px; } #button:hover{ background: #43A047; -webkit-transition: background 0.3s ease-in-out; -moz-transition: background 0.3s ease-in-out; transition: background-color 0.3s ease-in-out; } #button:active { box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5); } #contact input:focus, #contact textarea:focus { outline: 0; border: 1px solid #aaa; } ::-webkit-input-placeholder { color: #888; } :-moz-placeholder { color: #888; } ::-moz-placeholder { color: #888; } :-ms-input-placeholder { color: #888; } .dropbtn { background-color: #4CAF50; color: white; padding: 13px; font-size: 16px; width:125px; height:45px; border: none; cursor: pointer; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover {background-color: #f1f1f1} .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn { background-color: #3e8e41; } input[type="file"]{ display: none; } .custom-file-upload { cursor: pointer; padding: 13px 16px; width:125px; height:45px; border: none; font-family:Verdana; background: #4CAF50; color: #FFF; margin: 0 0 5px; font-size: 15px; display: inline-block; vertical-align: top; text-align: center; } .custom-file-upload:hover{ background: #43A047; -webkit-transition: background 0.3s ease-in-out; -moz-transition: background 0.3s ease-in-out; transition: background-color 0.3s ease-in-out; } .custom-file-upload:active{ box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5); } .overlay { height: 477px; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #F9F9F9; overflow-x: hidden; transition: 0.5s; padding-top: 25px; padding-bottom: 25px; padding-left: 25px; padding-right: 25px; } .overlay.collapsed { padding-top: 25px; padding-bottom: 25px; padding-left: 0; padding-right: 0; } .overlay-content { position: relative; /*top: 5%;*/ width: 100%; height: 100%; text-align: center; /*margin-top: 25px;*/ } .overlay-content .container { height: 100%; } .overlay-content fieldset:last-child { position: absolute; bottom: 0; margin-bottom: 0; } .overlay a { padding: 5px; margin-top:-15px; text-decoration: none; font-size: 36px; color: #818181; display: block; transition: 0.3s; z-index: 100; } .overlay a:hover, .overlay a:focus { color: #bababa; } .overlay .closebtn { position: absolute; top: 15px; right: 15px; font-size: 40px; } @media screen and (max-height: 450px) { .overlay a {font-size: 20px} .overlay .closebtn { font-size: 40px; top: 15px; right: 35px; } } #contact-submit{ float:right; cursor: pointer; font-size:15px; padding: 13px 32px; width:125px; height:45px; border: none; font-family:Verdana; background: #4CAF50; color: #FFF; margin: 0 0 5px; } #contact-submit:hover{ background: #43A047; -webkit-transition: background 0.3s ease-in-out; -moz-transition: background 0.3s ease-in-out; transition: background-color 0.3s ease-in-out; } #contact-submit:active { box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5); } #label{ float:left; text-decoration:underline; font-family:Verdana; font-size:15px; } #labelDetail{ padding-left:15px; float:left; font-family:Verdana; font-size:13px; text-align:left; max-height: 135px; overflow: auto; } #labelName{ padding-left:15px; float:left; font-family:Verdana; font-size:13px; } #labelNumber{ padding-left:15px; float:left; font-family:Verdana; font-size:13px; } #labelEmail{ padding-left:15px; float:left; font-family:Verdana; font-size:13px; } #labelAttach{ float:left; text-decoration:underline; font-family:Verdana; padding-top:12px; color:#4CAF50; } #labelFile{ float:left; font-family:Verdana; padding-top:16px; font-size:10px; padding-left:7px; } #filename{ font-family:Verdana; font-size:10px; padding-top:16px; } 

  <div class="container"> <form id="contact"> <h3>Connect With HR</h3> <fieldset class="fieldset"> <div class="dropdown"> <button class="dropbtn">Location</button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> <div class="dropdown"> <button class="dropbtn">Category</button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> </fieldset> <fieldset class="fieldset"> <textarea id="txtDetail" placeholder="Detail...." tabindex="2"></textarea> </fieldset> <h4>Contact Information</h4> <fieldset class="fieldset"> <input id="txtName" placeholder="Name" type="text" tabindex="4" > <input id="txtNumber" placeholder="Preferred Contact Number" type="tel" tabindex="5"> <input id="txtEmail" placeholder="Preferred Email" type="email" tabindex="6"> </fieldset> <fieldset class="fieldset"> <label for="file-upload" class="custom-file-upload"> <i class="fa fa-cloud-upload"></i> Attachment </label> <input id="file-upload" type="file"/> <p id="filename" style="display: inline-block"></p> <div id="myNav" class="overlay collapsed"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> <div class="overlay-content"> <div class="container"> <h5>Summary</h5> <fieldset class="fieldset"> <label id="label">Location:</label> <label id="labelLocation"></label> </fieldset> <fieldset class="fieldset"> <label id="label">Category:</label> <label id="labelCategory"></label> </fieldset> <fieldset class="fieldset"> <label id="label">Detail:</label> <label id="labelDetail"></label> </fieldset> <h6>Contact Information</h6> <fieldset class="fieldset"> <label id="label">Name:</label> <label id="labelName"></label> </fieldset> <fieldset class="fieldset"> <label id="label">Preferred Contact Number:</label> <label id="labelNumber"></label> </fieldset> <fieldset class="fieldset"> <label id="label">Preferred Email:</label> <label id="labelEmail"></label> </fieldset> <fieldset class="fieldset"> <label id="labelAttach">Attachment:</label> <label id="labelFile"></label> <button name="submit" id="contact-submit" data-submit="...Sending">Submit</button> </fieldset> </div> </div> </div> <span id="button" onclick="openNav()">Preview</span> </fieldset> </form> </div> 

Answer 1

As you have it configured you could add an ID to your dropdowns and pass the data using innerHTML. Check it, I think It was what you requested. I have just add the ID I said and what follows to your openNav() function:

document.getElementById("labelLocation").innerHTML = 
      document.getElementById("my-category").innerHTML;

document.getElementById("labelCategory").innerHTML = 
      document.getElementById("my-location").innerHTML;

 function openNav() { document.getElementById("labelLocation").innerHTML = document.getElementById("my-category").innerHTML; document.getElementById("labelCategory").innerHTML = document.getElementById("my-location").innerHTML; document.getElementById("myNav").classList.remove("collapsed"); var input = document.getElementById("txtDetail"); var value = input.value; var label = document.getElementById("labelDetail"); label.innerHTML = value; var input = document.getElementById("txtName"); var value = input.value; var label = document.getElementById("labelName"); label.innerHTML = value; var input = document.getElementById("txtNumber"); var value = input.value; var label = document.getElementById("labelNumber"); label.innerHTML = value; var input = document.getElementById("txtEmail"); var value = input.value; var label = document.getElementById("labelEmail"); label.innerHTML = value; document.getElementById("myNav").style.width = "100%"; } function closeNav() { document.getElementById("myNav").style.width = "0%"; document.getElementById("myNav").classList.add("collapsed"); } document.getElementById('file-upload').onchange = uploadOnChange; function uploadOnChange() { var filename = this.value; var lastIndex = filename.lastIndexOf("\\\\"); if (lastIndex >= 0) { filename = filename.substring(lastIndex + 1); } document.getElementById('filename').innerText = filename; var labelFile = this.value; var lastIndex = labelFile.lastIndexOf("\\\\"); if (lastIndex >= 0) { labelFile = labelFile.substring(lastIndex + 1); } document.getElementById('labelFile').innerText = labelFile; } var div = document.getElementsByClassName('dropdown-content'); for(var i =0;i<div.length;i++){ for(var j =0;j<div[i].children.length;j++){ div[i].children[j].addEventListener('click',function(){ this.parentNode.previousElementSibling.innerHTML = this.innerHTML; }) } } 

 * { margin: 0; padding: 0; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -o-font-smoothing: antialiased; font-smoothing: antialiased; text-rendering: optimizeLegibility; } .container { width: 100%; margin: 0 auto; position: relative; } #contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact textarea, #contact button[type="submit"] { font: 400 12px/16px "Verdana", Verdana; } #contact { background: #F9F9F9; padding: 25px; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24); height:477px; } #contact h3 { display: block; font-family:Verdana; font-size: 24px; font-weight: 300; margin-bottom: 10px; } #contact h4 { margin: 5px 0 15px; display: block; font-family:Verdana; font-size: 13px; font-weight: 400; } #contact h5 { text-decoration:underline; display: block; color:#4CAF50; font-family:Verdana; font-size: 19px; font-weight: normal; margin-bottom: 10px; } #contact h6 { text-decoration:underline; display: block; text-align:left; color:#4CAF50; font-family:Verdana; font-size: 15px; font-weight: normal; margin-bottom: 10px; } .fieldset { border: medium none !important; margin: 0 0 10px; min-width: 100%; padding: 0; width: 100%; } #contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact textarea { width: 100%; border: 1px solid #ccc; background: #FFF; margin: 0 0 5px; padding: 10px; } #contact input[type="text"]:hover, #contact input[type="email"]:hover, #contact input[type="tel"]:hover, #contact textarea:hover { -webkit-transition: border-color 0.3s ease-in-out; -moz-transition: border-color 0.3s ease-in-out; transition: border-color 0.3s ease-in-out; border: 1px solid #aaa; } #contact textarea { height: 100px; max-width: 100%; resize: none; } #button{ float:right; cursor: pointer; padding: 13px 32px; width:125px; height:45px; border: none; font-family:Verdana; background: #4CAF50; color: #FFF; margin: 0 0 5px; font-size: 15px; } #button:hover{ background: #43A047; -webkit-transition: background 0.3s ease-in-out; -moz-transition: background 0.3s ease-in-out; transition: background-color 0.3s ease-in-out; } #button:active { box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5); } #contact input:focus, #contact textarea:focus { outline: 0; border: 1px solid #aaa; } ::-webkit-input-placeholder { color: #888; } :-moz-placeholder { color: #888; } ::-moz-placeholder { color: #888; } :-ms-input-placeholder { color: #888; } .dropbtn { background-color: #4CAF50; color: white; padding: 13px; font-size: 16px; width:125px; height:45px; border: none; cursor: pointer; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover {background-color: #f1f1f1} .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn { background-color: #3e8e41; } input[type="file"]{ display: none; } .custom-file-upload { cursor: pointer; padding: 13px 16px; width:125px; height:45px; border: none; font-family:Verdana; background: #4CAF50; color: #FFF; margin: 0 0 5px; font-size: 15px; display: inline-block; vertical-align: top; text-align: center; } .custom-file-upload:hover{ background: #43A047; -webkit-transition: background 0.3s ease-in-out; -moz-transition: background 0.3s ease-in-out; transition: background-color 0.3s ease-in-out; } .custom-file-upload:active{ box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5); } .overlay { height: 477px; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #F9F9F9; overflow-x: hidden; transition: 0.5s; padding-top: 25px; padding-bottom: 25px; padding-left: 25px; padding-right: 25px; } .overlay.collapsed { padding-top: 25px; padding-bottom: 25px; padding-left: 0; padding-right: 0; } .overlay-content { position: relative; /*top: 5%;*/ width: 100%; height: 100%; text-align: center; /*margin-top: 25px;*/ } .overlay-content .container { height: 100%; } .overlay-content fieldset:last-child { position: absolute; bottom: 0; margin-bottom: 0; } .overlay a { padding: 5px; margin-top:-15px; text-decoration: none; font-size: 36px; color: #818181; display: block; transition: 0.3s; z-index: 100; } .overlay a:hover, .overlay a:focus { color: #bababa; } .overlay .closebtn { position: absolute; top: 15px; right: 15px; font-size: 40px; } @media screen and (max-height: 450px) { .overlay a {font-size: 20px} .overlay .closebtn { font-size: 40px; top: 15px; right: 35px; } } #contact-submit{ float:right; cursor: pointer; font-size:15px; padding: 13px 32px; width:125px; height:45px; border: none; font-family:Verdana; background: #4CAF50; color: #FFF; margin: 0 0 5px; } #contact-submit:hover{ background: #43A047; -webkit-transition: background 0.3s ease-in-out; -moz-transition: background 0.3s ease-in-out; transition: background-color 0.3s ease-in-out; } #contact-submit:active { box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5); } #label{ float:left; text-decoration:underline; font-family:Verdana; font-size:15px; } #labelDetail{ padding-left:15px; float:left; font-family:Verdana; font-size:13px; text-align:left; max-height: 135px; overflow: auto; } #labelName{ padding-left:15px; float:left; font-family:Verdana; font-size:13px; } #labelNumber{ padding-left:15px; float:left; font-family:Verdana; font-size:13px; } #labelEmail{ padding-left:15px; float:left; font-family:Verdana; font-size:13px; } #labelAttach{ float:left; text-decoration:underline; font-family:Verdana; padding-top:12px; color:#4CAF50; } #labelFile{ float:left; font-family:Verdana; padding-top:16px; font-size:10px; padding-left:7px; } #filename{ font-family:Verdana; font-size:10px; padding-top:16px; } 

 <div class="container"> <form id="contact"> <h3>Connect With HR</h3> <fieldset class="fieldset"> <div class="dropdown"> <button class="dropbtn" id="my-location">Location</button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> <div class="dropdown"> <button class="dropbtn" id="my-category">Category</button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> </fieldset> <fieldset class="fieldset"> <textarea id="txtDetail" placeholder="Detail...." tabindex="2"></textarea> </fieldset> <h4>Contact Information</h4> <fieldset class="fieldset"> <input id="txtName" placeholder="Name" type="text" tabindex="4" > <input id="txtNumber" placeholder="Preferred Contact Number" type="tel" tabindex="5"> <input id="txtEmail" placeholder="Preferred Email" type="email" tabindex="6"> </fieldset> <fieldset class="fieldset"> <label for="file-upload" class="custom-file-upload"> <i class="fa fa-cloud-upload"></i> Attachment </label> <input id="file-upload" type="file"/> <p id="filename" style="display: inline-block"></p> <div id="myNav" class="overlay collapsed"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> <div class="overlay-content"> <div class="container"> <h5>Summary</h5> <fieldset class="fieldset"> <label id="label">Location:</label> <label id="labelLocation"></label> </fieldset> <fieldset class="fieldset"> <label id="label">Category:</label> <label id="labelCategory"></label> </fieldset> <fieldset class="fieldset"> <label id="label">Detail:</label> <label id="labelDetail"></label> </fieldset> <h6>Contact Information</h6> <fieldset class="fieldset"> <label id="label">Name:</label> <label id="labelName"></label> </fieldset> <fieldset class="fieldset"> <label id="label">Preferred Contact Number:</label> <label id="labelNumber"></label> </fieldset> <fieldset class="fieldset"> <label id="label">Preferred Email:</label> <label id="labelEmail"></label> </fieldset> <fieldset class="fieldset"> <label id="labelAttach">Attachment:</label> <label id="labelFile"></label> <button name="submit" id="contact-submit" data-submit="...Sending">Submit</button> </fieldset> </div> </div> </div> <span id="button" onclick="openNav()">Preview</span> </fieldset> </form> </div>