hevhev011717 Ответов: 0

Динамическое текстовое поле и выпадающий список на основе другого выпадающего списка-javascript

Мне нужно было, чтобы выпадающий список назначения зависел от выпадающего списка моей модели. И всякий раз, когда пользователь выберет опцию в списке назначения, будет сгенерировано текстовое поле и метка. Однако я напутал с моим циклом for, поэтому всякий раз, когда пользователь добавляет пункт назначения, появляются значения model A. 1 и model 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;
	
	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>

littleGreenDude

Я не уверен, что полностью понимаю ваш вопрос, но несколько комментариев. Вы пометили вопрос с помощью JQuery и не включаете JQuery в код. Добавьте следующую строку (или любую другую версию JQuery, на которую вы хотите ссылаться)


При этом вы никогда не инициализируете значения b для массива, поэтому добавление чего-то вроде следующего в createOptionList приведет к этому:

если ($('модель').функция val () модель-A=='') {
ВАР массив = ["Модель-А. 1", "Модель-А. 2", "Модель-А. 3", "Модель-А. 4"];
}
еще {
var array = ["Model-B. 1", "Model-B. 2", "Model-B. 3", "Model-B. 4"];
}

И единственный другой комментарий, который я могу дать в настоящее время, заключается в том, что функция заполнения не определена.

hevhev011717

Спасибо за это и еще одно, как я могу отобразить соответствующие значения динамического выпадающего списка (назначения) (метка критерия и текстовое поле ячейки & qty) при выборе? @littleGreenDude

0 Ответов