下拉列表项目以标记

Question

我在下面的代码中找到了我创建的联系表单。 是否可以从两个下拉列表中将选定值从“位置”和“类别”字段旁边的预览页面上的标签中获取？ 什么都有帮助，谢谢。

  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

在配置完成后，您可以在下拉列表中添加ID并使用innerHTML传递数据。 检查一下，我想这就是你要求的。 我刚刚添加了我说的ID和你的openNav（）函数：

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>