Click here to Skip to main content
15,868,116 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I needed the destination dropdown list to be dependent on my model's dropdown list. And whenever the user will chose an option on the destination list, textbox and label will be generated. However, I've messed up with my for loop so whenever the user adds a destination, model A.1 and model A.2 values shows up and when the user choose Model B, the destination should be of Model B's.

Please help me. Im still struggling to learn html/javascript/jquery Here is my progress so far:

What I have tried:

HTML
<!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;
	
	switch (blank)
	{
		case "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)
		break;
		
		case "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)
		break;
		}
	}
}

</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> 
Posted
Comments
littleGreenDude 2-Oct-18 9:09am    
I'm not sure I fully understand your question, but a couple of comments. You have tagged the question with JQuery, and don't include JQuery in the code. Add the following line (or whatever JQuery version you want to reference)


With that in place, you are never initializing b values for the array, so adding something like the following in createOptionList will accomplish that:

if($('#model').val() == 'Model-A') {
var array = ["Model-A.1", "Model-A.2", "Model-A.3", "Model-A.4"];
}
else {
var array = ["Model-B.1", "Model-B.2", "Model-B.3", "Model-B.4"];
}

And the only other comment I can provide at this time is that the populate function is not defined.
hevhev011717 2-Oct-18 19:31pm    
Thanks for that and one more thing, how can I display the dynamic dropdown list's (destination) respective values (criteria's label and cell & qty's textbox) when being chosen? @littleGreenDude

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900