Как создать динамическое текстовое поле на основе динамического флажка в JavaScript - PullRequest
Новая
       7

Как создать динамическое текстовое поле на основе динамического флажка в JavaScript

0 голосов
/ 18 сентября 2018

У меня есть массив значений в списке опций, и когда пользователь выберет, будет установлен динамический флажок.Когда пользователь устанавливает флажок, он отображает значение флажка и его текстовое поле.Как отобразить динамическое текстовое поле на основе списка параметров и динамического флажка вместе со значением флажка?

Вот фрагмент созданной программы.Невозможно создать динамическое текстовое поле (которое будет называться «количество») на основе флажка (критерии) и списка параметров (модель) вместе со значением флажка (критерии).А также я не могу снять флажок в критериях.Должно отображаться только значение флажка

Пожалуйста, помогите.крайне необходимо 

var mappingData = {
  "model-A": {
    "destination": ["Destination A1", "Destination A2", "Destination A3"],
    "criteria": ["Criteria A1", "Criteria A2", "Criteria A3"]
  },
  "model-B": {
    "destination": ["Destination B1", "Destination B2", "Destination B3"],
    "criteria": ["Criteria B1", "Criteria B2", "Criteria B3"]
  }
};

function populate(model, destination) {
  var mod = document.getElementById('model');
  var des = document.getElementById('destination');
  var criteria = document.getElementById('criteria');
  des.innerHTML = "";
  criteria.innerHTML = "";
  mappingData[mod.value].destination.forEach(function(item) {
    createCheckBox(item, des)
  });
  mappingData[mod.value].criteria.forEach(function(item) {
    createCheckBox(item, criteria)
  });
}

function createCheckBox(value, parent) {
  var checkbox = document.createElement("input");
  checkbox.type = "checkbox";
  checkbox.name = value;
  checkbox.value = value;

  var label = document.createElement('label')
  label.htmlFor = value;
  label.appendChild(document.createTextNode(value));

  parent.appendChild(checkbox)
  parent.appendChild(label)
  parent.appendChild(document.createElement("br"))
}
<!DOCTYPE html>
<html>

<body>
  Model:
  <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>
  <hr /> Destination:
  <div id="destination"></div>
  <hr /> Criteria:
  <div id="criteria"></div>
  <hr />
</body>

</html>

1 Ответ

0 голосов
/ 18 сентября 2018

Прежде всего, я думаю, что вам нужен список radio вместо списка checkbox - вам нужен только один выбранный, верно?

Во-вторых, вам нужно добавить обработчик события click для переключателей, чтобы при нажатии пользователем на них у вас был код для создания текстового поля ниже и отображения значения: 

 var radioBox= document.createElement("input");
  radioBox.type = "radio";
  radioBox.name = "radio"; // radio boxes must have same name to Work as a Group
  radioBox.onclick = "createTextBox()";

В 'createTextBox' вы добавляете динамическое текстовое поле

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...