时间戳

首页 > 解决方案 > 如何使用 javascript 下拉菜单将已创建的 html 表单附加到表中？

javascript - 如何使用 javascript 下拉菜单将已创建的 html 表单附加到表中？

问题描述

我创建了一个下拉列表，其值从 1 到 6（需要添加更多）。在那个 html 中，我创建了一个空白表和一个表单。

我想做的是..当我从下拉列表中选择值 1 时，我希望将 id 1 的形式附加到表中

并且当我选择值为 2 的值 2 表单时，不应附加任何其他值

到目前为止，当我选择添加到 html 表的下拉表单但它不可见时会发生什么

<!DOCTYPE html>
    <html lang="en">
    <head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
    </head>
    <body>
	<table border ="1" align='center'>
		<tr>

		   <td>
			  <select id="colors" onchange="changedesc()">
				 <option value="1">Desc1</option>
				 <option value="2">Desc2</option>
				 <option value="3" >Desc3</option>
				 <option value="4">Desc4</option>
				 <option value="5">Desc5</option>
				 <option value="6" >Desc6</option>
			  </select>
		   </td>

		</tr>
	 </table>

	 <table id ="addform">

		<!-- to be inserted here the div-->
	 </table>

		<form id=1 style="visibility: hidden;">
				<input type="text">
				<textarea>abc</textarea>
			</form>
		<form id=2 style="visibility: hidden;">
				<input type="text">
				<input type="checkbo">
		</form>
		

	 </div>

	 <script>
		 function changedesc(){
		 var eID = document.getElementById("colors");
		 var colorVal = eID.options[eID.selectedIndex].value
		 if (colorVal=="1"){
			var frm = document.getElementById(1);
			frm.removeAttribute("style");
			var ff = document.getElementById("addform")
			ff.appendChild(frm);
			
		 }
		 if (colorVal=="2"){
			var frm = document.getElementById(2);
			frm.removeAttribute("style");
			var ff = document.getElementById("addform")
			ff.appendChild(frm);
			//how to remove previuos one
		 }
		}
	 </script>
</body>
</html>

标签： javascripthtml

解决方案

这里要提几点：

  • 在您的代码段中有一个结束</div>标记，这将导致 HTML 无效。
  • 您有一个带有一个包含选择按钮的单元格的表格，我建议您使用表格，<div>因为表格用于显示要被视为表格的数据。
  • 您有另一个没有<tr>,的表<td>，并且将表单标记附加到 id，没有<tr>,<td>标记将是无效的 HTML 并导致 HTML 无法呈现。
  • 隐藏表单使用id的属性，1尽管2它已被浏览器解析和识别，但我建议您使用更有意义的 id。

  • 作为建议的最后一件事是使用display// 属性来切换显示/隐藏表单，而不是在此处附加它们visibility。opacity

    这是一个片段，其中包含来自您的片段的工作 HTML：

function changedesc(){
 var eID = document.getElementById("colors");
 var colorVal = eID.options[eID.selectedIndex].value
 if (colorVal=="1"){
  var frm = document.getElementById(1).cloneNode(true);
  console.log(frm);
  frm.id="new-form1"
  frm.removeAttribute("style");
  var ff = document.getElementById("form-td");
  ff.innerHTML = "";
  ff.appendChild(frm);

 }
 if (colorVal=="2"){
  var frm = document.getElementById(2).cloneNode(true);
  frm.id="new-form2"
  frm.removeAttribute("style");
  var ff = document.getElementById("form-td")
  ff.innerHTML = "";
  ff.appendChild(frm);
  //how to remove previuos one
 }
}
<!DOCTYPE html>
    <html lang="en">
    <head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
    </head>
    <body>
	<table border ="1" align='center'>
		<tr>

		   <td>
			  <select id="colors" onchange="changedesc()">
				 <option value="1">Desc1</option>
				 <option value="2">Desc2</option>
				 <option value="3" >Desc3</option>
				 <option value="4">Desc4</option>
				 <option value="5">Desc5</option>
				 <option value="6" >Desc6</option>
			  </select>
		   </td>

		</tr>
	 </table>

	 <table id ="addform">
    <tr>
      <td id="form-td"></td>
    </tr>
		<!-- to be inserted here the div-->
	 </table>

		<form id=1 style="visibility: hidden;">
				<input type="text">
				<textarea>abc</textarea>
			</form>
		<form id=2 style="visibility: hidden;">
				<input type="text">
				<input type="checkbo">
		</form>
	 <script>
		 
	 </script>
</body>
</html>

推荐阅读