基于另一个下拉列表-javascript

时间：2018-10-02 00:28:21

标签： javascript jquery html css dom

我需要目标下拉列表依赖于我模型的下拉列表。而且，只要用户在目标列表上选择一个选项，就会生成文本框和标签。但是，我搞砸了for循环，因此无论何时用户添加目标，都会显示模型A.1和模型A.2的值，并且当用户选择模型B时，目标应该是模型B的。

请帮助我。我仍然在努力学习html / javascript / jquery 到目前为止，这是我的进度：

<!DOCTYPE html>
<html>
<head>

<style>
 th, td {
	 padding:15px;
	 font-weight: normal;
 }

 </style>
 
 <script type="text/javascript">
window.onload = function() {
document.getElementById("addbtn").addEventListener("click", function(){
 createOptionList();
 dynamicObjects();

});

};

function createOptionList() {

  var destination = document.getElementById("destination");
  var array = ["Model-A.1", "Model-A.2", "Model-A.3", "Model-A.4"];
  var selectList = document.createElement("select");
  
 

  selectList.setAttribute("id", "mySelect");
  destination.appendChild(selectList);


  for (var i = 0; i < array.length; i++) {

    var option = document.createElement("option");
	var des = document.getElementById("destination");
	var br = document.createElement("br");
	
    option.setAttribute("value", array[i]);
    option.text = array[i];
    selectList.appendChild(option);
	destination.appendChild(br);
	
	
  }

}

function dynamicObjects() {
	
  var cri = document.getElementById("criteria").value
  var criteria = document.getElementById("criteria");
  var qty = document.getElementById("qty");
  var cell = document.getElementById("cell");
  var option = document.getElementsByTagName ("option");
  var blank = "";


  for (var i = 0; i < option.length; i++ ){
	var wrapper = document.createElement("span");
	var textbox = document.createElement("input");
	var textbox1 = document.createElement("input");
	var br = document.createElement("br");
	blank = option[i].innerText;
	
	if (blank == "Model-A.1"){
		wrapper.className = blank;
		textbox.className = blank;
		wrapper.innerText = "Good/n";
		criteria.appendChild(wrapper);
		criteria.appendChild(br);
		qty.appendChild(textbox)
		qty.appendChild(br)
		cell.appendChild(textbox1)
		cell.appendChild(br)
				
	}	else if (blank == "Model-A.2"){
		wrapper.className = blank;
		textbox.className = blank;
		wrapper.innerText = "Fine/n";
		criteria.appendChild(wrapper);
		criteria.appendChild(br);
		qty.appendChild(textbox)
		qty.appendChild(br)
		cell.appendChild(textbox1)
		cell.appendChild(br)
		}
    }	
}

</script>
 
 
 
 
</head>
<body>

<div class = "container">
<table class = "table">

<tr><td> MODEL: </td><td>
  <select id="model" name="model" onchange="populate(this.id, 'destination')" >
    <option value="select">--Select Model--</option>
    <option value="Model-A">Model-A</option>
	<option value = "Model-B"> Model-B </option>
  </select> </td></tr>
</table>


<input type="button" id="addbtn" value="Add Destination"/>
<hr>

<table>
	<tr>
		<th><center> DESTINATION: </th></center>
		<th><center> CRITERIA: </th></center>
		<th><center> QTY: </th></center>
		<th><center> CELL: </th></center>
	</tr>	
	<tr>
		<td width = "140"><center><div id="destination" style = "width:230px; word-wrap: break-word"></center></div></td>
		<td width = "140"><center><div id="criteria" style = "width:350px; word-wrap: break-word"></center></div></td>
		<td width = "140"><center><div id = "qty" required></td></center>
		<td width = "140"><center><div id = "cell" required></td></center>

		
	</tr>
 </table> 
 </body>
</html>

1 个答案:

答案 0 :(得分：1)

我希望这就是您想要的：

<!DOCTYPE html>
<html>
<head>

<style>
 th, td {
 padding:15px;
 font-weight: normal;
}

</style>

<script type="text/javascript">
window.onload = function() {
document.getElementById("addbtn").addEventListener("click", function(){
createOptionList();


});

};

function createOptionList() {

var destination = document.getElementById("destination");
var letter = document.getElementById('model').value;
if (letter!="select"){
var array = [`${letter}.1`, `${letter}.2`, `${letter}.3`, `${letter}.4`];
var selectList = document.createElement("select");
selectList.setAttribute("id", "mySelect");
destination.appendChild(selectList);

for (var i = 0; i < array.length; i++) {

var option = document.createElement("option");
var des = document.getElementById("destination");
var br = document.createElement("br");

option.setAttribute("value", array[i]);
option.text = array[i];
selectList.appendChild(option);
destination.appendChild(br);



}
dynamicObjects();
}

}

function dynamicObjects() {

var cri = document.getElementById("criteria").value
var criteria = document.getElementById("criteria");
var qty = document.getElementById("qty");
var cell = document.getElementById("cell");
var option = document.getElementsByTagName ("option");
var blank = "";


for (var i = 0; i < option.length; i++ ){
var wrapper = document.createElement("span");
var textbox = document.createElement("input");
var textbox1 = document.createElement("input");
var br = document.createElement("br");
blank = option[i].innerText;

if (blank == "Model-A.1"){
    wrapper.className = blank;
    textbox.className = blank;
    wrapper.innerText = "Good/n";
    criteria.appendChild(wrapper);
    criteria.appendChild(br);
    qty.appendChild(textbox)
    qty.appendChild(br)
    cell.appendChild(textbox1)
    cell.appendChild(br)

  } else if (blank == "Model-A.2"){
    wrapper.className = blank;
    textbox.className = blank;
    wrapper.innerText = "Fine/n";
    criteria.appendChild(wrapper);
    criteria.appendChild(br);
    qty.appendChild(textbox)
    qty.appendChild(br)
    cell.appendChild(textbox1)
    cell.appendChild(br)
    }
   }    
 }

</script>




</head>
<body>

<div class = "container">
<table class = "table">

<tr><td> MODEL: </td><td>
<select id="model" name="model" onchange="populate(this.id, 
'destination')" >
<option value="select">--Select Model--</option>
<option value="Model-A">Model-A</option>
  <option value = "Model-B"> Model-B </option>
</select> </td></tr>
</table>


<input type="button" id="addbtn" value="Add Destination"/>
<hr>

<table>
<tr>
    <th><center> DESTINATION: </th></center>
    <th><center> CRITERIA: </th></center>
    <th><center> QTY: </th></center>
    <th><center> CELL: </th></center>
</tr>   
<tr>
    <td width = "140"><center><div id="destination" style = "width:230px; 
word-wrap: break-word"></center></div></td>
    <td width = "140"><center><div id="criteria" style = "width:350px; 
word-wrap: break-word"></center></div></td>
    <td width = "140"><center><div id = "qty" required></td></center>
    <td width = "140"><center><div id = "cell" required></td></center>


</tr>
</table> 
</body>
</html>

https://jsfiddle.net/hexcmu05/

相关问题
最新问题